Question

即时使用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
        });

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

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

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

到目前为止

解决方案：

我发现这个link and this非常有用（猴子修补jquery-autocomplete）来编辑样式，但仍然不是我想要的......

Answer 1

不幸的是，它没有现成的选项。幸运的是，使用JQuery Autocomplete提供的事件可以很简单地完成它。看看这个JSFiddle：http://jsfiddle.net/RyTuV/133/

正如您所注意到的，您要添加的相关代码使用JQuery Autocomplete Open event：

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

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

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

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

Answer 2

您需要自己编写代码，或者查看是否有不同的自动完成插件执行此操作。

要自己编码，您需要引用response事件以获取第一个匹配的结果文本并将其放在输入框中。要操纵所选文字，请参阅此帖子：Selecting Part of String inside an Input Box with jQuery

Answer 3

找到上面的答案，但它有来自jqueryUI的下拉列表，所以我开始编写自己的脚本。并决定在这里发布。工作jsfiddle：https://jsfiddle.net/wb3kpxaj/

代码：

/* Need jquery to be extended with code snippet for selectrange i found somewhere, but forgot where...: */
$.fn.selectRange = function(start, end) {
  var e = document.getElementById($(this).attr('id')); // I don't know why... but $(this) don't want to work today :-/
  if (!e) return;
  else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */ 
  else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */
  else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; }
  return $(e); };

autofill=['Banana', 'Banonas', 'Appel', 'Appelpie', 'Other', 'OtherMoreSpecific', 'OtherMoreDifferent'];

$('#autofill').on('keyup', function(e) {
   unvalidInputKeys=[8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,91,92,93,112,113,114,115,116,117,118,119,120,121,122,123,144,145];
  if($(this).val().length>0&&!unvalidInputKeys.includes(e.keyCode)) {
    for(i=0;i<autofill.length;i++) {
      if(autofill[i].startsWith($(this).val())) {
        userTypedLength=$(this).val().length;
        $(this).val(autofill[i]);
        $(this).selectRange(userTypedLength, autofill[i].length);
        return;
        }
      }
    }
  });

Answer 4

效果很好！在移动设备上：虽然不多。菜单中的第一项在第一次显示后会自动被选择。

为避免这种情况，我想出了这种针对移动设备的解决方案：

    close: function( event, ui ) {
        let firstElement =  $(this).data("uiAutocomplete").menu.element[0].children[0]
           , inpt = $(this)
           , 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
            $("#zoominmap").click(); // trigger click on mobile
        }
    },

close而不是open-高亮显示后在按钮（#zoominmap）上单击事件。

我将整个代码包装在此媒体查询中：

if (window.matchMedia('only screen
 and (min-device-width:120px)
 and (max-device-width:767px)').matches) {
/*
mobile
*/
} else {
/*
desktop
*/
}

jquery自动填充自动填充字段，具有第一个值并突出显示已添加的部分

4 个答案: