AA_Haider Posted December 30, 2012 Share Posted December 30, 2012 I have a search bar attached with html datalist.html datalist updated with php file. when any word is typed it show the related result like as google when you enter any keyword it show the datalist related to this word and you can easily select any vaule for pressing DOWN ARROW KEY but in my search bar when any keyword is enter is show result like google but when press DOWN ARROW KEY it will not select any value because I m using onkeyup javascript event so when you press DOWN ARROW KEY it is also a key and due to onkeyup event datalist show again due to this reason any value does not select. what did I do,can i cannot use onkeyup event if not then what event I use. Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/ Share on other sites More sharing options...
Adam Posted December 31, 2012 Share Posted December 31, 2012 (edited) You should detect the key code sent within the event object and act accordingly. You'll need to post your code if you're having any specific issues. Edited December 31, 2012 by Adam Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1402258 Share on other sites More sharing options...
AA_Haider Posted January 7, 2013 Author Share Posted January 7, 2013 here is a url http://testmywebsite.hostzi.com/htmldatalist.html please open it and write "do" you can see related result now pres down arrow key and wait a sec you can see it will disappeare.i know why this appear i am using "onkeyup" event for this when you press down arrow key the function will refresh. you will be able to see the code from page view source. like google when you enter and word it will give you a list related to it. i want to make my datalist like that. Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1403976 Share on other sites More sharing options...
haku Posted January 8, 2013 Share Posted January 8, 2013 As Adam said, in your onkeyup you need to detect the keycode and respond accordingly. If it's the down key, you'll want to highlight the next item (or up key the previous item). If it's any other key, you'll want to do what you are already doing. Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1404085 Share on other sites More sharing options...
AA_Haider Posted January 8, 2013 Author Share Posted January 8, 2013 I did not understand what are you saying here is a code. <html> <script type="text/javascript"> function searchoption(){ var skw = document.getElementById("searchBar").value; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest; }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function () { if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("sop").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","searchopt.php?skw="+skw,true); xmlhttp.send(); } </script> <head> </head> <body> <input type="text" id="searchBar" onkeyup="searchoption()" list="sop" /> <datalist id="sop"> </datalist> </body> </html> please heeeeeelp me. Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1404214 Share on other sites More sharing options...
haku Posted January 8, 2013 Share Posted January 8, 2013 Your onkeyup function is being called here: Â <input type="text" id="searchBar" onkeyup="searchoption()" list="sop" /> You are using the 'onkeyup' attribute of the <input> element. When the key comes up, you are calling the function searchoption(). In this function, you will need to do a test to see which key was pressed. If it's the up or down area, you will want to highlight the previous/next element, or if it's anything else you will want to hide the popup. Â Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1404218 Share on other sites More sharing options...
AA_Haider Posted January 9, 2013 Author Share Posted January 9, 2013 down arrow key is pressed.I want when down arrow key is pressed then the function searchoption() can't calling. can here is any thing which can do that. Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1404482 Share on other sites More sharing options...
haku Posted January 10, 2013 Share Posted January 10, 2013 Yes. It's almost exactly the same as what I said above. But instead of highlighting the next or previous item, you use 'return;' instead. Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1404524 Share on other sites More sharing options...
haku Posted January 10, 2013 Share Posted January 10, 2013 If you are looking for us to write the code for you, it's probably not going to happen. You'll need to hire someone for that. Quote Link to comment https://forums.phpfreaks.com/topic/272519-value-does-not-select-from-html-datalist/#findComment-1404525 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.