jquery-ui - jquery ui 组合框结果排序

Question

我有一个Jquery UI Combobox 自动完成小部件，我正在尝试编写一个匹配器函数来对搜索结果进行排序。我正在尝试获得首选结果：

当您键入例如。结果应该这样排序：

• 伦敦_
• 博洛尼亚_ _
• 巴塞罗那_ _

当术语与第一个键入的字母匹配时，它位于第一位，当术语包含字母时，它出现在第一条规则之后。

我发现了类似的东西，但我无法让它工作。在此解决方案中，我找不到在匹配器变量和术语变量之间建立关系的方法。

组合框原件

source: function( request, response ) {
              // match by first letters in search term
              var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex(request.term), "i" ); 
              response( select.children( "option" ).map(function() {
                var text = $( this ).text();
                if ( this.value && ( !request.term || matcher.test(text) ) )
                  return {
                    label: text.replace(
                      new RegExp(
                        "(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"
                      ), "<strong>$1</strong>" ),
                    value: text,
                    option: this
                  };
              }) );
            },

jquery ui自动完成的解决方案

$(document).ready(function () {
    // my source is in html
    var source = ['Adam', 'Benjamin', 'Matt', 'Michael', 'Sam', 'Tim'];
    $("input").autocomplete({
        source: function (request, response) {
            var term = $.ui.autocomplete.escapeRegex(request.term)
                , startsWithMatcher = new RegExp("^" + term, "i")
                , startsWith = $.grep(source, function(value) {
                    return startsWithMatcher.test(value.label || value.value || value);
                })
                , containsMatcher = new RegExp(term, "i")
                , contains = $.grep(source, function (value) {
                    return $.inArray(value, startsWith) < 0 &&
                        containsMatcher.test(value.label || value.value || value);
                });

            response(startsWith.concat(contains));
        }
    });
});

链接到我找到的类似答案

JS小提琴

任何可能的反馈将不胜感激。

谢谢你。

Answer 1

我能够通过添加以下内容来完成这项工作：

source: function (request, response) {
                var matcher = $.ui.autocomplete.escapeRegex(request.term),
                startsWithMatcher = new RegExp("^" + matcher, "i"), 
                startsWith = $.grep(select.children("option"), function(value) {
                        return startsWithMatcher.test(value.label || value.value || value);
                    }),
                    containsMatcher = new RegExp(matcher, "i"),
                    contains = $.grep(select.children("option"), function (value) {
                        return $.inArray(value, startsWith) < 0 &&
                            containsMatcher.test(value.label || value.value || value);
                    });
                response(startsWith.concat(contains).map(function(option) {
                  var text = $(option).text();
                  var val = $(option).val();  
                  return {
                    label: text,
                    value: val,
                    option: $(option)
                  };
                }));
            }

我还需要从选择框中删除第一个空白选项，否则你会得到一个空的结果。相反，我为组合框输入添加了一个占位符

$('.ui-combobox-input').attr('placeholder','Search Here').val('');

JS小提琴