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.
Value Does Not Select From Html Datalist?
Started by AA_Haider, Dec 30 2012 08:13 AM
html datalist javascript ajax
8 replies to this topic
#3
AA_Haider
-
- New Members
-
- 6 posts
Newbie
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.
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
-
- Gurus
-
- 6,172 posts
Advanced Member
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
-
- New Members
-
- 6 posts
Newbie
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
-
- Gurus
-
- 6,172 posts
Advanced Member
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
-
- New Members
-
- 6 posts
Newbie
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.
can here is any thing which can do that.
#8
haku
-
- Gurus
-
- 6,172 posts
Advanced Member
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
-
- Gurus
-
- 6,172 posts
Advanced Member
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
