im使用
jqueryui autocomplete插件与以下代码
$(this).autocomplete({
source: function(request,response) {
$.ajax({ url: 'clinic/auto',data: { 'term': this.term,'name': this.element.attr('complete')},dataType: "json",type: "POST",success: function(data){
response(data);
}
});
},minLength: 2
});
这将在下拉列表中显示所有结果的列表.
我的问题是如何让它自动完成工作,并突出显示添加的部分更容易使用？
我要编码吗？还是有现有的选择？
如果我要做手册怎么办？
示例图片：
解决方案至今：
我发现这个link and this是非常有用的(猴子修补jquery自动完成)编辑造型,但仍然不是我想要的..
解决方法
不幸的是,它没有现有的选项.幸运的是,使用JQuery Autocomplete提供的事件有一个非常简单的方法.查看这个JSfiddle：
http://jsfiddle.net/RyTuV/133/
您会注意到,您要添加的相关代码使用JQuery Autocomplete Open event：
Triggered when the suggestion menu is opened or updated.
使用此事件,您可以将列表中第一个项目的文本添加到输入文件中已输入的内容,然后在输入文本之后突出显示添加到文本末尾：
$(this).autocomplete({
source: function(request,response) {
$.ajax({ url: 'clinic/auto',success: function(data){
response(data);
}
});
},minLength: 2,open: function( event,ui ) {
var firstElement = $(this).data("autocomplete").menu.element[0].children[0],inpt = $('#autocomplete'),original = inpt.val(),firstElementText = $(firstElement).text();
/*
here we want to make sure that we're not matching something that doesn't start
with what was typed in
*/
if(firstElementText.toLowerCase().indexOf(original.toLowerCase()) === 0){
inpt.val(firstElementText);//change the input to the first match
inpt[0].selectionStart = original.length; //highlight from end of input
inpt[0].selectionEnd = firstElementText.length;//highlight to the end
}
}
});
使用它作为模板,您可以循环选择菜单中的项目,以找到以输入文本开头的第一个匹配项,并使用它填充并突出显示,而不是仅使用第一个项目.