我使用 jquery mobile 创建并自动完成文本。我能够从远程服务器获取数据,但问题是当我点击列表时,它只显示列表是点击我想要的是当我从列表中选择项目时,所选项目应该放在输入字段和列表中应该隐藏。
任何人都可以提前告诉如何做到这一点。
<input type="text" id="searchTermInput" placeholder="enter project name"/>
<ul id="autocomplete" data-role="listview" data-inset="true"
data-theme="b" data-mini="true"></ul>
这是从远程服务器获取数据的代码:
$(document).ready(function(){
$('#searchTermInput').on('input',function(e){
var $itemList=$('#autocomplete');
$itemList.empty();
var $inputElem=$(this);
//triget only when at least 2 characters have been entered
var keywords = $inputElem.val();
if(keywords.length<2){
return;
}
$.ajax({
url:"link of the url file",
type:"POST",
data:{projectName:keywords},
dataType:"json",
context:{responseCallback: $itemList},
timeout:3000,
success:function(data,status,xhr){
if(data.length>0){
var listItemHtml="";
$.each(data,function(i,val){
listItemHtml +="<li><a href='#'>"+val.project_name+"</a><?li>";
});
$('#autocomplete').html(listItemHtml);
$('#autocomplete').listview("refresh");
}
}, error: function (xhr, status, err) {
alert(err);
}
});
});
});