jquery - How can i make the new html 5 datalist input open immediately? -
question hard understand , english not native language, i'll best. new html tag <datalist>
allows me create input field dropdown menu (actually not sure how call it).
the first time page loaded there only:
<input list='chemikalienliste' class="input_search" /> <datalist id='chemikalienliste'></datalist> <a href="#" class="add_button">+</a>
as result there no dropdown menu when first click it. (thats good!) when user typing sign input field generates few <option>
tags, buuuut not drop menu. have type second sign first.
for(var = 0; < data.length; i++){ suchergebnis = suchergebnis+ "<option value='"+data[i].trvialname+" ("+data[i].chemischername+")"+"' />"; } input_search.parent(".add").children("#chemikalienliste").children("option").remove(); //deletes options input_search.parent(".add").children("#chemikalienliste").append(suchergebnis);//adds new options
the entire code
$(".input_search").focus().keyup(function(){ //user types var input_search = $(this); var searchstring = input_search.val(); $.ajax({ url:"api.php", data:"search="+searchstring, type:"post", datatype:"json", success: function(data){ //recieve data var suchergebnis = ""; for(var = 0; < data.length; i++){ suchergebnis = suchergebnis+ "<option value='"+data[i].trvialname+" ("+data[i].chemischername+")"+"' />"; } input_search.parent(".add").children("#chemikalienliste").children("option").remove(); input_search.parent(".add").children("#chemikalienliste").append(suchergebnis); input_search.focus(); }, error: function (xmlhttprequest, textstatus, errorthrown) { $("#output").append("<span class='message'>[ajax]</span> <span class='failed'>error:</span> xmlhttprequest " + xmlhttprequest[0] + " errorthrown: " + errorthrown +" textstatus : " + textstatus+" <br />"); } }); });
sorry language... hope @ least can understand problem is.
if there other options create google search input field, please tell me
since arleady using jquery think should use jquery ui autocomplete. datalist not made support dynamic options (but work can it). can read more here: http://devproconnections.com/html5/working-html5-web-forms-autocompletion-and-datalist-element
Comments
Post a Comment