I have a datalist that shows the autocompletion of some fields how can I make sure that the input is only a part of that selected field??
You can solve this problem by defining a variable of type number.
After selecting from the input, add a number to the variable and using ngIf in html or if in ts, Control the number of choices.
I assume that you have Street Names in the dropdown and that object also includes street information as well (maybe in some other variable). So you want user to search using the street information as well but in the dropdown you just want to show the user Street names? if that's the case,
you can do something like this:
<datalist>
<option>
{{streetName}} <span style="display:none">{{streetInfo}}</span>
</option>
</datalist>
This way your street information wont be shown but will filter the result on basis of stretInfo as well.
hope it helps.
Related
I am trying to organize a drop down list that will display a single value to the user but will also pass back an array object upon changing the selection.
Currently I have an array called classificationresult that has 3 elements CLASSIFICATION_NAME, GROUP_ID, GROUP_NAME.
When a user selects a particular CLASSIFICATION_NAME I want to pass back the entire array result containing all 3 elements listed above.
Currently the code below works for everything EXCEPT showing the CLASSIFICATION_NAME in the drop-down box upon loading. It shows the list once you click, but it starts with a blank until it is clicked. Any way to fix this? I believe the display element is tied to [ngValue] but that is also what I am using to pass back the entire array versus just the one.
Any help would be greatly appreciated.
<p>Select Classification*</p>
<select [(ngModel)]="selectedClassification (ngModelChange)="changedClassification($event)">
<option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>
Summary -- I want my drop down list to always have a value shown to the user (value being the Classification Name) but when one is selected I want the entire array to pass to the changedClassification function. Also sometimes after a user selects from other drops down on this page they will also go blank, but if they are selected a second time they will populate.
If everything is working as you are expecting except the initial value being displayed, I wonder if you need a [compareWith] function. I don't know what your classificationresult model looks like, but if I had to take a guess, putting a [compareWith] function on your <select> element would fix the issue.
Here is an article explaining it a little more.
I made this Stackblitz as an example with using the [compareWith] function. In my demo I am using ReactiveForms, but the compareWith should still be the same.
For your code, it may look something like:
<p>Select Classification*</p>
<!-- add this [compareWith] -->
<select [compareWith]="myCompareFunc" [(ngModel)]="selectedClassification" (ngModelChange)="changedClassification($event)">
<option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>
In your .ts file:
export class YourComponent {
// all your component code..
/* compare function, change the logic to fit your needs */
myCompareFunc (classificationRes1: any, classificationRes2: any): boolean {
return classificationRes1 && classificationRes2
? classificationRes1.CLASSIFICATION_NAME === classificationRes2.CLASSIFICATION_NAME
: classificationRes1 === classificationRes2
}
}
If that doesn't fix your issue, you may need to post more of your .ts code and data models.
Im using Angular material's for multipe choice purpose like mentioned in their site https://material.angular.io/components/select/overview (8th example).
I also have an array of items (key and value) which are a part of the choices([key:1 value:extra cheese, key:2 value:onion])... I want them to be automatically selected (probably using formController) ... how can I do this?
plus, after the user selected/ unselectedsome options how do i get a new array back ?
thank you in advance!
you need to use ngModel
<mat-select placeholder="Toppings" [formControl]="toppings"
multiple [(ngModel)]='defaultValue'>
and define this defulatValue in your component like this, or programaticly as you wish
defaultValue = [this.toppingList[1], this.toppingList[3]]
and you can get this variable when anything changes, it will contain your selected values. Took this example from material example, all works fine for me.
I am trying to understand a simple auto-search result textbox.
Now, I have setup javascript events to make the ajax call and fetch the search result from the server, as the user types a string in the textbox, and store it in an array. So, I have a javascript array that contains my search result.
var searchResult = [
"Accordion Company",
"A Little Mouse",
"Another Time",
"ASIO"
];
I want to attach this list to some property(or something else) of the textbox so that my list appears as a dropdown as the user types.
Does a textbox even allow that? What HTML control/property allows the autocomplete list to appear?
Background:
1) I have worked with jQueryUI and all of this can be achieved very easily there. I am interested in learning how is the inherent property of a textbox overriden to show the autocomplete result? If I strip down everything to simple HTML and javascript how is this achieved? Or is it just an HTML/CSS trick that looks like a dropdown
2) I have looked into vCard too but couldn't figure out how will I override a vCard array with my javascript array that contains the search result.
Just trying to understand whether I can tell my INPUT type="text" control to show a custom autocomplete list.
Thanks!
There is the list attribute and the associated datalist tag
<input list="things">
<datalist id="things">
<option value="Some">
<option value="No">
<option value="Any">
</datalist>
You can take your array and build a datalist element.
datalist is html5 so support might be a problem.
I am using the djFilteringSelect control to show values in a dropdown as user type a value.
The lookup and typehead is working fine. The user type a letter and the dropdown allow the user to select a value which is then displayed in the dropdown field.
If the user now decide to remove the value first selected so that the combobox is empty and leave the field, then the first value in the list is now automatically filled in.
The consequence of this is that if the user have added a value there is no way to remove the value and leave the box emtpy.
I am using required=false for both the control and the dojo attribute but it does not seem to help. There are also a few other djFilteringSelect attributes I have tried like "Autocomplete" and "trim" but it does not work
Here is the code
<xe:djFilteringSelect id="test" type="select" store="jsondata" searchAttr="data" required="false" labelType="html" invalidMessage="Not valid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false"></xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:djFilteringSelect>
Initally the field is not required, but if the user have entered a value it is required.
My question is if there a way to prevent the djFilteringSelect control to always populate the field if I have previously added a value
I found someone who solved this in another stack overflow topic, by creating an empty entry in my data store. but I could not get this to work
Dojo: Select of empty value for FilteringSelect while required=false
I do this quite a lot. Right now I don't have a working sample to show you (since I moved to bootstrap - and have to code the selects by manually adding select2 controls) but something like this should do it...
I add an "empty" value at the top of my select - and that seems to work no matter whether I am using a combobox, djCombobox or combobox with select2 from bootstrap. My markup typically looks like:
<xp:comboBox id="inputLocationSelector" value="#{User.catchListType}" disableClientSideValidation="true">
<xp:selectItem itemLabel="(none)" itemValue=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[${Configuration.meta.listLocationTypeOptions}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
Then you could specify "(none)", "All" or " " for the "not-selected" value depending on your needs.
Validation is a different thing so just specifying "required=false" does not give you the "empty" value.
/John
Please take a look at this plunkr.
I have a couple of select lists that are filtered based on some simple conditions. There is a list (of Plants) that is dynamically constructed by clicking on the "Add" button. When each row is added, I would like the selects to automatically select the first item in the list. Please bear in mind that there are filters and the items change based on the select list on the top of the form (SalesOrg).
Preferably, I would like to do this without using DOM in the controller.
UPDATE: Have a look at this simpler plunk. Select "Texas" as the state. The city dropdown has been accordingly filtered. The initial selection does not work because the original dropdown variable (DropDownData.Cities) is no longer the source of the select - it has been filtered.
Just useng-init like:
<select class="form-control" id="selSalesOrg" ng-model="SelData.SalesOrg"
data-ng-options="salesOrg.id as salesOrg.Description for salesOrg in DropDownData.SalesOrgs"
ng-init="SelData.SalesOrg = DropDownData.SalesOrgs[0].id">
</select>
The fixed PLunker
The second way is instead ng-init directive add to your controller something like:
$scope.SelData.SalesOrg = DropDownData.SalesOrgs[0].id;
Comment**
Since you use filter actually we can't take first element but first in list after filtering