i have one auto suggest text box.my problem with this is that when the suggestions are
listed out and when i tried to navigate it through the arrow keys, the selection of the
item disappears very soon as and when they are selected. also i cannot navigate through all the items listed. anyone please help me
Please post your code
See this jquery autosuggest example, it will guide you.
http://jquery.bassistance.de/autocomplete/demo/
thank you all for you supports. i post my complete code here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/default.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
.container {
background-color: #BBF;
width: 1000px;
border: 1px solid #000;
}
.header {
width: 1000px;
border-bottom: 1px solid #000;
}
.header ul {
list-style: none
}
.header ul li {
/* width: 150px;
*/ border-left: 1px solid #000;
float: left;
font-weight: bold;
padding-left: 2px;
}
.data {
/*width: 150px;*/
float: left;
padding-left: 2px;
}
.rowodd,.roweven {
position: relative;
width: 1000px;
border-top: 1px solid #000;
background-color: #E8E8E8;
}
.roweven {
background-color: #D1DCE9;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.autosuggest
{
}
.rate
{
color:red ;
}
.autosuggest li
{
list-style-type: none;
}
.myul
{
position:absolute;
background:#E2FEEF;
cursor: pointer;
margin-top: 0px;
margin-left:0px;
margin-right:auto;
overflow-y: scroll;
height:200px;
width:350px;
overflow-x:hidden;
}
.autosuggest li:hover
{
background:#CCC;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
}
.text
{
width: 100px;
height: 30px;
float:left ;
}
</style>
<script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if( (KeyID >=48 && KeyID <=57) || (KeyID >=65 && KeyID <=90) || (KeyID ==8 ) ||( KeyID ==32) ||( KeyID ==222)||( KeyID ==46) || (KeyID >=186 && KeyID <=191) ){
current_ptr=-1;
}
switch(KeyID)
{
case 9:
if(document.getElementById('myul').style.display=='block'){
var x=document.getElementById(current_ptr).innerHTML;
//alert(x);
x=String(x);
var start=x.indexOf('!?')+2;
var end= x.lastIndexOf('!?');
var str=x.substring(start,end);
start=str.indexOf('/?');
var name=str.substr(0,start);
str=str.substr(start+2);
start=str.indexOf('/?');
var id=str.substr(0,start);
str=str.substr(start+2);
start=str.indexOf('/?');
var rate=str.substr(0,start);
str=str.substr(start+2);
start=str.indexOf('/?');
var munit=str.substr(0,start);
document.getElementById('myul').style.display='none';
suggest(current_ptr,name,id,rate,munit);
}else{
if(document.getElementById('txt' + global_index + 'x3').disabled == false ){
alert("text box enabled");
}
}
break;
case 27:
document.getElementById('myul').style.display='none';
break;
case 38:
moveup();
break;
case 40:
movedown();
break;
}
}
var current_ptr=-1;
function movedown(){
var count_of_li=document.getElementsByTagName('li');
if(document.getElementById('myul').style.display=='block'){
var no_of_items=count_of_li.length-11;
current_ptr=current_ptr+1;
//alert(current_ptr);\
if(current_ptr!=no_of_items){
document.getElementById(current_ptr).style.background="#CCC";
document.getElementById(current_ptr).style.color="Green";
document.getElementById(current_ptr).style.fontFamily="Tahoma, Geneva, sans-serif";
setTimeout(function () { document.getElementById(current_ptr).focus();document.getElementById(current_ptr).style.backgroundColor='CCC';}, 100);
document.getElementById(current_ptr).style.fontSize="14px";
}else{
current_ptr=-1;
}
}
}
function moveup(){
var count_of_li=document.getElementsByTagName('li');
if(document.getElementById('myul').style.display=='block'){
var no_of_items=count_of_li.length-11;
//alert(current_ptr);\
current_ptr=current_ptr-1;
if(current_ptr>-1){
document.getElementById(current_ptr).style.background="#CCC";
document.getElementById(current_ptr).style.color="RED";
document.getElementById(current_ptr).style.fontFamily="Tahoma, Geneva, sans-serif";
setTimeout(function () { document.getElementById(current_ptr).style.backgroundColor='CCC' }, 100);
document.getElementById(current_ptr).style.fontSize="14px";
}else{
current_ptr=parseInt(no_of_items);
}
}
}
</script>
<script src="responsexml.js"> </script>
<script type="text/javascript">
function a(){
alert("ok");
}
function round_number(number, dec_places)
{
var new_number = '';
var i = 0; //Just used in loops
var sign = ""; //If negative, a minus sign will be prefixed to the result
number = number.toString(); //We need to operate on and return a string, not a number
number = number.replace(/^\s+|\s+$/g, ''); //Remove any excess white space
if (number.charCodeAt(0) == 45) //minus sign
{
sign = '-';
number = number.substr(1).replace(/^\s+|\s+$/g, '');
}
dec_places = dec_places * 1; //We need an integer
dec_point_pos = number.lastIndexOf(".");
if (dec_point_pos == 0)
{
number = "0" + number;
dec_point_pos = 1;
}
if (dec_point_pos == -1 || dec_point_pos == number.length - 1)
{
if (dec_places > 0)
{
new_number = number + ".";
for(i=0; i<dec_places; i++)
{
new_number += "0";
}
if (new_number == 0)
{
sign = "";
}
return sign + new_number;
}
else
{
return sign + number;
}
}
var existing_places = (number.length - 1) - dec_point_pos;
if (existing_places == dec_places)
{
return sign + number; //If so, just return the input value
}
if (existing_places < dec_places)
{
//If so, pad out with zeros
new_number = number;
for(i=existing_places; i<dec_places; i++)
{
new_number += "0";
}
if (new_number == 0)
{
sign = "";
}
return sign + new_number;
}
var end_pos = (dec_point_pos * 1) + dec_places;
var round_up = false; //Whether or not to round up (add 1 to) the next digit along
if ((number.charAt(end_pos + 1) * 1) > 4)
{
round_up = true;
}
var digit_array = new Array();
for(i=0; i<=end_pos; i++)
{
digit_array[i] = number.charAt(i);
}
for(i=digit_array.length - 1; i>=0; i--)
{
if (digit_array[i] == ".")
{
continue;
}
if (round_up)
{
digit_array[i]++;
if (digit_array[i] < 10)
{
break;
}
}
else
{
break;
}
}
for (i=0; i<=end_pos; i++)
{
if (digit_array[i] == "." || digit_array[i] < 10 || i == 0)
{
new_number += digit_array[i];
}
else
{
new_number += "0";
}
}
if (dec_places == 0)
{
new_number = new_number.replace(".", "");
}
if (new_number == 0)
{
sign = "";
}
return sign + new_number;
}
var global_index = 1 ;
var suggest_data = '' ;
function rate(e, index)
{
global_index = index ;
if( e.keyCode == 13 )
{
var el1= document.getElementById('txt' + global_index + 'x3');
setTimeout(function() {el1.focus(); }, 10);
return false;
}
}
function next(e, index)
{
if( e.keyCode == 13 )
{
var txtbox=document.getElementById('txt' + index + 'x3');
if(txtbox.value==""){
alert("Please Enter The Quantity");
setTimeout(function() {txtbox.focus(); }, 10);
return false;
}
var newindex = index +1 ;
var html = '<div class="rowodd clearfix" id="tr' + newindex + 'x">' ;
html += '<div class="data" style="width:350px;" id="td' + newindex + 'x1">' ;
html += '<input type="text" style="width:350px;" id="txt' + newindex + 'x1" class="text" onKeyUp="showUser(this.value)"/>';
html += '<div id="container' + newindex + 'x"></div>' ;
html += '</div>' ;
html += '<div class="data" align="right" id="td' + newindex + 'x2" style="width:150px;">' ;
html += '<label class="rate" id="txt'+newindex+'x2" ></label>' ;
html += '</div>' ;
html += '<div class="data" align="right" id="td' + newindex + 'x3" style="width:100px;">' ;
html += '<input id="txt'+newindex+'x3" disabled="disabled" style="width:100px;" type="TEXT" onkeydown="return next(event,'+newindex+');" />' ;
html += '</div>' ;
html += '<div class="data" id="td' + newindex + 'x4" align="center" style="width:75px;">' ;
html += '<label class="rate" id="txt'+newindex+'x4" ></label>' ;
html += '</div>' ;
html += '<div class="data" align="right" id="td' + newindex + 'x5" style="width:150px;">' ;
html += '<label class="rate" id="txt'+newindex+'x5" ></label>' ;
html += '</div>' ;
html += '<div class="data" id="td' + newindex + 'x6" align="center" style="width:125px;">' ;
html += '<a href="#" id="tr'+newindex+'x6" onclick="deleterow(this.id);" ><img src="../images/icon_delete.gif" style="border:0;"/></a>' ;
html += '</div></div>';
var e = document.getElementById('prod'+index) ;
if( e )
{
var qty = document.getElementById('txt'+index+'x3').value ;
var pinfo = e.value.split('+') ;
if( pinfo[0] != undefined )
{
var post_data = pinfo[0] + "+" + qty ;
var epost = document.getElementById('prod_post'+index) ;
var rowamount=document.getElementById('prod_amount'+index) ;
if( epost )
{
epost.value = post_data;
}
if( pinfo[1] != undefined )
{
var te = document.getElementById('txt'+index+'x5') ;
var tot = parseInt(qty) * parseFloat(pinfo[1]) ;
tot=round_number(tot,2);
te.innerHTML = tot;
rowamount.value=tot;
var gte = document.getElementById('gte') ;
val1=parseFloat(gte.value) + parseFloat(tot);
gte.value = round_number(val1,2);
gte.disabled=true;
}
}
}
document.getElementById('td' + global_index + 'x3').innerHTML = document.getElementById('txt' + index + 'x3').value ;
document.getElementById('idtable' ).innerHTML += html;
document.getElementById('container' + (newindex) + 'x').innerHTML = suggest_data ;
var el2=document.getElementById('txt' + (newindex) + 'x1') ;
setTimeout(function() {el2.focus(); }, 10);
global_index = newindex ;
return false;
}
}
function suggest(id, prod_name, prod_id, prod_rate,prod_unit)
{
var prod_rate=String(prod_rate);
if(prod_rate.indexOf('.',0)==-1){
prod_rate=prod_rate+".00";
}else{
var position=prod_rate.indexOf('.',0);
var after_decimal=prod_rate.substr(position);
after_decimal=String(after_decimal);
if(after_decimal.length<=2){
prod_rate=prod_rate+"0";
}
}
suggest_data = document.getElementById('container' + (global_index) + 'x').innerHTML;
var str = '<input id="prod'+global_index+'" type="HIDDEN" value="' + prod_id + '+' + prod_rate + '" />' ;
str += '<input name="prod[]" id="prod_post'+global_index+'" type="HIDDEN" value="" />' ;
str +='<input id="prod_amount'+global_index+'" type="HIDDEN" value="" />' ;
str += prod_name ;
document.getElementById('td' + global_index + 'x1').innerHTML = str ;
document.getElementById('txt' + global_index + 'x2').innerHTML = prod_rate;
document.getElementById('txt' + global_index + 'x3').disabled = false ;
document.getElementById('txt' + global_index + 'x4').innerHTML = prod_unit ;
var el3=document.getElementById('txt' + global_index + 'x3');
setTimeout(function() {el3.focus(); }, 10);
}
function hideSuggestions(id)
{
try
{
var myul = getElemId('myul');
listWrapID.style.visibility = "hidden";
}catch(e){}
}
function showitems(){
document.getElementById('myul').style.display= "block" ;
}
function deleterow(id){
//id to delete row from table
var id_am_ch=id;
var id_tr= id;
var tr_id=id_tr.replace("x6","x");
if(confirm("Are You Sure Want To Delete This Entry?")){
//id for subtracting value form total amount
var am_id=id_am_ch.replace("x6","");
am_id_no=am_id.replace("tr","");
var amount_text_id="prod_amount" + am_id_no;
//alert(am_id=am_id.replace("x6",""));
var amount=document.getElementById(amount_text_id).value;
var gte = document.getElementById('gte') ;
val2=parseFloat(gte.value) - parseFloat(amount);
gte.value =round_number(val2,2);
gte.disabled=true;
e=document.getElementById(tr_id);
e.parentNode.removeChild(e);
}
//alert(tr_id);
}
function submitfn(){
document.frm1.submit();
}
</script>
</head>
<body>
<form action="" method="POST" name="frm1" id="frm1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
<div class="container clearfix" id="idtable">
<div class="header clearfix">
<ul>
<li style="width:350px"><center>Item Name</center></li>
<li style="width:150px"><center>Rate</center></li>
<li style="width:100px"><center>Quantity</center></li>
<li style="width:75px"><center>Unit</center></li>
<li style="width:150px"><center>Amount</center></li>
<li style="width:125px"><center>Action</center></li>
</ul>
</div>
<div class="rowodd clearfix" id="tr1x">
<div class="data" id="td1x1" style="width:350px;">
<input type="text" name="txt1x1" id="txt1x1" style="width:350px;" onKeyUp="showUser(this.value)"/>
<div id="container1x">
<div class="autosuggest" id="scroll" >
<ul id="myul" class="myul" style="display:none;" >
</ul>
</div>
</div>
</div>
<div class="data"id="td1x2" align="right" style="width:150px;">
<label class="rate" id="txt1x2" ></label>
</div>
<div class="data" id="td1x3" align="right" style="width:100px;">
<input id="txt1x3" type="TEXT" style="width:100px;" disabled="disabled" onKeyDown="return next(event,1);" />
</div>
<div class="data"id="td1x4" align="center" style="width:75px;" >
<label class="rate" id="txt1x4" ></label>
</div>
<div class="data"id="td1x5" align="right" style="width:150px;">
<label class="rate" id="txt1x5" ></label>
</div>
<div class="data" id="td1x6" align="center" style="width:125px;">
<a href="#" id="tr1x6" onClick="deleterow(this.id);" ><img src="../images/icon_delete.gif" style="border:0;"/></a>
</div>
</div>
</div>
<table cellpadding="0" cellspacing="1" border="0" style="float:right">
<tr>
<td colspan="2" align="center"> </td>
</tr>
<tr>
<td colspan="2" align="center"><b><u>Terms & Conditions</u></b></td>
</tr>
<tr style="height:10px;">
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="right" >
<?php echo $terms; ?>
</td>
</tr>
<tr style="height:10px;">
<td colspan="2"></td>
</tr>
<tr>
<td align="right">Total Order Value <img src='../images/inda.jpg' border='0' style='height:12px; width:12px'/></td>
<td align="left" style="width:240px;">
<input style="float:right" type="Button" value="Submit" onClick="submitfn();" />
<input style="float:right" type="text" disabled="disabled" id="gte" value="0" />
</td>
</tr>
</table>
</form>
</body>
</html>var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
if(str.length>0){
var e=document.getElementById('myul')
e.style.display='block';
var url="responsexml.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}else{
var e=document.getElementById('myul')
e.style.display='none';
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("myul").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}<?php
$q=$_GET["q"];
$i=0;
for($k=0;$k<20;$k++)
{
$name="Item1";
$id=$i;
$rate="100";
$unit="Nos";
echo "<li id='$i' onClick='suggest($i,\"".$name."\",$id,$rate,\"".$unit."\")'>" .ucwords($name)."<span class='rate'>"."(". $rate. ")</span><input type='hidden' id='$i' value='!?$name/?$id/?$rate/?$unit/?!?'/></li>";
$i++;
}
?>this is the order of my page.
note only items like item with rate 100 is exist in the example.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.