CODEWITHSUNDEEP
javascriptphpjquerycssajax
Neeraj
Neeraj

Reputation: 497

ajax autocomplete textbox search arrow key selection is not working

I have a simple auto complete search box in codeignator that displays locations in mysql database results using php "LIKE" function.Everything works fine. i would just like to make it so that when the user starts typing he/she can use the arrow keys to scroll down and press enter on an item just like google. my code is below

<div class="banner_search_inner_box_search" style="margin-top: 15px;">
<input type="text" name="search" class="search" id="searchid" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>

My css code 

#result
{
    position:absolute;
    width: 457px;
    /*padding:10px;*/
    display:none;
    margin-top:-1px;
    border-top:0px;
    overflow:hidden;
    border:1px #CCC solid;
    background-color: white;
}
.show
{
    padding:10px; 
    border-bottom:1px #999 dashed;
    font-size:13px; 
    height:6px;
}
.show:hover
{
    background:#4c66a4;
    color:#FFF;
    cursor:pointer;
}

JS code

<script type="text/javascript" src="<?=PUBLICPATH?>js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var AJAXPATH = 'http://localhost/PCenter/';
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url:AJAXPATH + 'search/show_city',
data: dataString,
selectFirst: true,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;    
});

jQuery("#result").live("click",function(e){ 
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut(); 
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>

somebody please help me

Upvotes: 0

Views: 2522

Answers (1)

Sunny R Gupta
Sunny R Gupta

Reputation: 5126

Use the following plugin:

http://jqueryui.com/autocomplete/#remote

It allows you to fetch the results from a remote Data source via AJAX. You may have to change the format of the AJAX response (JSON response), to match the format which autocomplete requires.

Upvotes: 2

Related Questions