Jump to content

Value Does Not Select From Html Datalist?


AA_Haider

Recommended Posts

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
Share on other sites

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
Share on other sites

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
Share on other sites

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
Share on other sites

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
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.