jquery自动完成自动填充字段,具有第一个值和高亮度添加部分

Question

即时通讯使用jqueryui自动完成插件与以下代码

$(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
        });

这会在下拉列表中显示所有结果的列表.

我的问题是如何让它为你自动完成工作并突出显示添加的部分以便于使用？

我必须编码吗？或者已经存在一个选项？如果我想做它手动怎么做？示例图片:

迄今解决方案:

我发现这个链接 ,这是非常有用的(猴子修补jquery-autocomplete)来编辑样式,但仍然不是我想要的..

Answer 1

不幸的是,它没有现成的选择.幸运的是,有一种非常简单的方法可以使用JQuery Autocomplete提供的事件来完成它.看看这个JSFiddle:http://jsfiddle.net/RyTuV/133/

您会注意到,您要添加的相关代码使用JQuery Autocomplete Open事件:

打开或更新建议菜单时触发.

使用此事件,您可以将列表中第一个项目的文本添加到已输入到输入字段中的内容,然后在输入文本之后突出显示添加文本的末尾:

$(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,
    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
        }
    }
});

使用此作为模板,您可以循环浏览菜单中的项目以查找以输入文本开头的第一个匹配项,并使用它来填充和突出显示,而不是仅使用第一个项目.