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. 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 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. 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. 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. 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. 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. 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. 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. 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. 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
Archived
This topic is now archived and is closed to further replies.