filmov
tv
JQuery UI Autocomplete to suggest the user as they type with available options from array - Part-1
Показать описание
We will suggest user as they type in a text field about the options available for them to select. This is done by using autocomplete of JQuery UI.
You can download the complete zip file for all the codes used in different parts of the tutorial.
Part 1
We will use one array as source for our autocomplete to work. The options for the user to select will be from the array with elements.
We can use one array with options as source
source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP", "Perl", "MySQL","Access","Excel","Dot Net" ]
Using array object as source
We can use one array with label and value for each option. Once the user select one of the option ( label will be visible to user ) , the value will be also available for our further processing.
By using select event we can collect the label and value of the user selection. This data we can display by using one alert window for our understanding. The actual uses of this will be posting this value to one backend script and getting the full details of the record by using load function in part 2 of this tutorial.
You can download the complete zip file for all the codes used in different parts of the tutorial.
Part 1
We will use one array as source for our autocomplete to work. The options for the user to select will be from the array with elements.
We can use one array with options as source
source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP", "Perl", "MySQL","Access","Excel","Dot Net" ]
Using array object as source
We can use one array with label and value for each option. Once the user select one of the option ( label will be visible to user ) , the value will be also available for our further processing.
By using select event we can collect the label and value of the user selection. This data we can display by using one alert window for our understanding. The actual uses of this will be posting this value to one backend script and getting the full details of the record by using load function in part 2 of this tutorial.