Question

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

搜索“M”应返回：

Matt，Michael，Sam，Tim，Adam，Benjamin

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

Adam，Benjamin，Matt，Michael，Sam，Tim

不幸的是，看起来Autocomplete 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 "]

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

3 个答案: