jQuery的自动完成自动填充字段的第一个值和highligh添加部分 [英] jquery autocomplete auto fill field with 1st value and highligh added part

问题描述

我使用带有以下代码的jqueryui自动完成插件

im using jqueryui autocomplete plugin with following code

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

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

This display a list of all results in a dropdown.

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

my question is how do i get it to autocomplete work for u and highlight the added part for easier use?

我必须编写代码吗?还是已经有一个选择? 如果我手动做，该怎么办? 图片示例:

do i have to code it ? or there is an already existing option for that? if i hv to do it manual how can it be done ? example pic:

到目前为止的解决方案:

我找到了此链接

I have found this link and thisto be very usefull (monkey-patching jquery-autocomplete) to edit styling ,yet still not what i want..

推荐答案

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

Unfortunately, there is not an existing option for it. Fortunately, there's a pretty straightforward way to do it using the events supplied with JQuery Autocomplete. Check out this JSFiddle: http://jsfiddle.net/RyTuV/133/

您会注意到，要添加的相关代码使用

As you'll notice, the relavant code you want to add uses the JQuery Autocomplete Open event:

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

Triggered when the suggestion menu is opened or updated.

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

Using this event, you can add the text of the first item in the list to what is already typed into the input filed, and then highlight from after the input text to the end of the added text:

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

使用此模板作为模板，您可以循环浏览菜单中的项目以查找以输入文本开头的第一个匹配项，然后使用其进行填写和突出显示，而不是仅使用第一个项目.

Using this as a template, you could loop though the items in the menu to find the first match that starts with the input text, and use that to fill in and highlight, instead of only using the first item.

这篇关于jQuery的自动完成自动填充字段的第一个值和highligh添加部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！