根据匹配位置对自动完成 UI 结果进行排序

Question

我想根据匹配项在字符串中的位置对我的 jQuery 自动完成 UI 结果进行排序。匹配是第一个字母的结果应该优先于匹配在字符串中间的结果。

搜索“M”应该返回：

马特、迈克尔、山姆、蒂姆、亚当、本杰明

相反，由于它现在只是按字母顺序返回项目，所以我得到了这个：

亚当、本杰明、马特、迈克尔、山姆、蒂姆

不幸的是，自动完成 UI 似乎没有任何选项可以执行此类操作，而是按照收到的顺序显示结果。让 MySql 进行排序不是一种选择，因为所有可能的匹配项都已预加载，因此我不会在每次击键时都调用数据库。有人做过这样的事吗？

Answer 1

您可以通过为source 选项提供函数而不是简单数组来提供任何您想要的本地过滤逻辑。这是一个简单的示例，可以满足您的基本要求：

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

示例： http://jsfiddle.net/zkVrs/

基本上，逻辑是建立一个以术语开头的匹配数​​组，然后将其与包含该术语但不以该术语开头的匹配连接。

这里的性能可能是个问题，尤其是在调用$.inArray 时。可能是完成该部分的更好方法，但希望这将为您提供一个良好的起点。

Answer 2

一个可能的优化：从源列表中剔除进入startsWith的项目，然后在附加包含搜索字符串的内容时不需要测试重复。但是，权衡是每次输入字符串更改时都需要重新生成源数组。

Answer 3

单词之间有空格似乎确实有问题，请尝试以下作为来源

    source=[" Family And Community " , 
" Finance And Legal " , 
" Food And Beverages " , 
" Government " , 
" Health And Medicine " , 
" Home And Garden " , 
" Industrial Supplies And Services " ,
 " Non-governmental Organisations (ngos) " , 
" Personal Care " , 
" Public Utilities And Environment " , 
" Real-estate And Insurance " , 
" Religious Organisations And Associations " , 
" Shopping And Specialty Stores " , 
" Sports And Recreation " ,
 " Transportation " , 
" Travel And Tourism " , 
" Farming " , 
" Farming Equipments And Services " , 
" Feed, Seed And Grain " , 
" Fishing " , 
" Fishing Equipments And Services " , 
" Forests " , 
" Timber Equipments And Services " , 
" General Supplies And Services " , 
" Livestock " , 
" Wildlive " , 
" Minerals And Organic Matte " , 
" Accessories " , 
" Detailing And Aesthetics " , 
" Motorcycles " , 
" Motorised Vehicles " , 
" New And Used Dealers " , 
" Parts And Supplies " , 
" Related Services " , 
" Repairs Body Work " , 
" Repairs Mechanical " , 
" Trailers " , 
" Administrative And Specialty Services " , 
" Advertising " , 
" Associations - Organisations " , 
" Communication And Audio-visual " , 
" Consultants " , 
" Document Services " , 
" Employment And Career Resources " , 
" Engineers " , 
" Furniture And Office - Industrial Machines " , 
" Import And Export Services " , 
" Lawyers " , 
" Marketing And Sales " , 
" Office Supplies - General " , 
" Printing, Publishing And Copying " , 
" Shipping, Packaging And Postal Services " , 
" Trade Shows, Expositions And Conventions " , 
" Alterations And Services " , 
" Clothing - General " , 
" Clothes And Fashion Accessories " , 
" Footwear " , 
" Outerwear " , 
" Uniforms And Work Clothing " , 
" Communications Services And Equipments " , 
" Computer Equipments " , 
" Computer Services " , 
" Electronics - Services And Equipments " , 
" Information Systems " , 
" Internet - Communication And Events " , 
" Internet - Development And Services " , 
" Building Materials And Equipments " , 
" Ceramics And Tiles " , 
" Chimneys " , 
" Concrete, Cement And Paving " , 
" Contractor Equipments And Services " , 
" Design And Architecture " , 
" Electrical Products And Services " , 
" Floors, Ceilings And Roofs " , 
" Foundations And Piling " , 
" Hardware - Supplies And Services " , 
" Heavy Construction And Equipments " , 
" Inspectors And Surveyors " , 
" Painting And Plastering " , 
" Plumbing And Piping " , 
" Academic " , 
" Libraries " , 
" Services And Supplies " , 
" Specialised Schools "]