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.
Related
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.
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.
I have making a simple jsp app and i have a many to many relationship between song and genre. What form field should i use to add multiple genres to a song. I am thinking of check boxes but i don't know if it is appropriate. Here is my erd.
If the goal is to select multiple options, checkboxes would be the best option.
Radio and <select> would only select one.
W3 Schools: <input> Tag
A multi-select dropdown will suit best here. And I suggest Select2 (https://select2.github.io/) if you're using jQuery in your project.
Regarding manipulating the values, I suggest use JSON. You can get selected Genres from Select2 as an array. Just bind like this
[
{
"song": "<song_name>",
"genres": "[select2 values in array]"
},
..
]
I want to submit my form, then have the form self-reference itself and retain the values.
How can I set it up to retain which item I have selected? It can retain the value of the selected item upon the second form load?
All I know is that I may have to do a CFloop rather than run my query directly on the query attribute.
Heres my select code:
<cfselect Name="CandyLand" required="yes" size="6"
Query="getCandyInfo" style="width: 200px"
Value="UserID" Display="Name" >
<Option selected="selected"></option>
</cfselect>
Edit:
Well it seems Dan's Solution works in the sense of how I asked the question. I forgot to mention that I have 3 other form objects where I want their form values retained upon form submit. For example I have a textbox, a 2 radio buttons, and a checkbox that I want to retain their values. The values are obtained through a Bind that changes the value of these objects when I click a different object in the <Select>.
For example:
<cfinput name="Chocolate" type="checkbox"
bind="cfc:Candyland.getFat({CandyLand#click})" bindAttribute="checked" value="#Form.Chocolate#">
Upon submit despite retain the clicked item, all objects go blank.
You're making your life harder for yourself by using <cfselect>. Just use a normal <select>, then set the appropriate option to be 'selected' via checking its value with the form submission.
<select name="CandyLand" [etc]>
<cfloop query="getCandyInfo">
<option value="#userId#"<cfif userId eq form.CandyLand> selected</cfif>>#name#</option>
[etc]
There is an active move in the CFML community to ditch this kind of cruft from the language, and encouraging people to use more robust solutions:
ColdFusion UI the Right WayColdFusion UI the Right Way
I'm not going to tell you to stop using ColdFusion UI tags anymore...
Oi! You bloody wankers! Stop using ColdFusion UI controls
cfselect has a selected attribute. You just have to check to see if the form has been submitted.
if (StructKeyExists(form, "CandyLand"))
SelectedValue = Form.CandyLand;
else
SelectedValue = GetCandyInfo.UserID[1];
<cfselect name="CandyLand" etc
selected = SelectedValue>
I have a form which is used as an interface for CRUD on database records. Some of the elements on the form are interdependent, such that if one field has a value of X, then other fields should be made required and filled out by the user.
A simple example might be something like a personal info section:
<select name="relationship-status">
<option value="single">Single</option>
<option value="married">Married</option>
</select>
<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />
...where the fields spouse-first-name and spouse-last-name would be required if relationship-status was set to married, and would be disabled (or hidden) otherwise.
My question is, in this example, when a person goes from married to single and wants to update their data as such, we also want to clear the spouse name values and post this back to the server so that the values are cleared in the database. We can use JavaScript to clear the fields for them when they change to single, but if we disable the form elements so that they can't edit them, then they don't get POSTed when the form is submitted.
I can think of the following solutions:
We could make them readonly instead of disabled, but that method only works for certain form controls (specifically, it does not work for other select elements), so this isn't an option.
We could duplicate each of these fields as a hidden input that would be POSTed with the form, but not editable by the user, but this seems like such a hack.
We could also enable the disabled fields right before submitting, and then re-disable them right afterwards. This is the method I'm using right now, but I feel like I'm missing something, and there has to be a better way.
Is there something I'm not thinking of, or a more sensible way of accomplishing both:
Not allowing the user to edit a field, and
Allowing the field's value to be POSTed with the form, even if blank.
My recommendation is, beside to make the validation in the client side, add in the javascript the function form.submit(), if someone disable the JS won't be able to submit the form, beside that agree with the others comments, add server validation.
I found that the most robust and least kludgy solution is to use the readonly property for all elements except <select>. For <select> elements, I just disable the <option> child elements that aren't currently selected. This effectively prevents the user from changing the value. I then color the <select> as though it were disabled with a gray background to complete the illusion. At this point, all form elements will post with the form, even with no values, and regardless of whether they're "disabled" or not.