基于匹配位置排序自动完成UI结果

Question

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

搜索"M"应该返回:

Matt, Michael, Sam, Tim, Adam, Benjamin

相反，因为它现在只是按字母顺序返回项目，所以我得到这个:

Adam, Benjamin, Matt, Michael, Sam, Tim

不幸的是，看起来像自动完成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 "]