Jump to content


Photo

Value Does Not Select From Html Datalist?

html datalist javascript ajax

  • Please log in to reply
8 replies to this topic

#1 AA_Haider

AA_Haider

    Newbie

  • New Members
  • Pip
  • 6 posts

Posted 30 December 2012 - 08:13 AM

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.

#2 Adam

Adam

    Advanced Member

  • Gurus
  • 5,695 posts
  • LocationSheffield / UK

Posted 30 December 2012 - 07:07 PM

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 by Adam, 30 December 2012 - 07:08 PM.


#3 AA_Haider

AA_Haider

    Newbie

  • New Members
  • Pip
  • 6 posts

Posted 07 January 2013 - 11:17 AM

here is a url
http://testmywebsite...mldatalist.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.

#4 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,177 posts

Posted 07 January 2013 - 08:32 PM

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.

#5 AA_Haider

AA_Haider

    Newbie

  • New Members
  • Pip
  • 6 posts

Posted 08 January 2013 - 09:08 AM

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.

#6 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,177 posts

Posted 08 January 2013 - 09:18 AM

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.


#7 AA_Haider

AA_Haider

    Newbie

  • New Members
  • Pip
  • 6 posts

Posted 09 January 2013 - 01:27 PM

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.

#8 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,177 posts

Posted 09 January 2013 - 07:56 PM

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.

#9 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,177 posts

Posted 09 January 2013 - 07:58 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com