Question

我在codeignator中有一个简单的自动完成搜索框，它使用php“LIKE”函数显示mysql数据库结果中的位置。一切正常。我只想这样做，以便当用户开始输入时，他/她可以使用箭头键向下滚动并按下像谷歌一样的项目。我的代码在下面

<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>

我的css代码

#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代码

<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>

有人请帮助我

Answer 1

使用以下插件：

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

它允许您通过AJAX从远程数据源获取结果。您可能必须更改AJAX响应的格式（JSON响应），以匹配自动完成所需的格式。

ajax自动完成文本框搜索箭头键选择不起作用

1 个答案: