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

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

搜索“M”应返回:

马特,迈克尔,萨姆,蒂姆,亚当,本杰明

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

亚当,本杰明,马特,迈克尔,萨姆,蒂姆

不幸的是,看起来Autocomplete UI没有任何选项来执行此类操作,而只是按照收到的顺序显示结果。 让MySql执行排序不是一个选项,因为所有可能的匹配都是预加载的,因此我不会在每次按键时调用数据库。 有人做过这样的事吗?

您可以通过为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调用。 可能是一个更好的方法来完成这一部分,但希望这将给你一个很好的起点。

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

当单词之间存在空格时似乎有问题,请尝试以下作为来源

  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 "]