jQuery和QUOT;自动完成＆QUOT;插件是搞乱我的数据的顺序 [英] jQuery "Autocomplete" plugin is messing up the order of my data

问题描述

我使用的是一对夫妇不同的页面乔恩Zaefferer的自动完成功能插件。在这两种情况下，显示的字符串的顺序有点乱了。

I'm using Jorn Zaefferer's Autocomplete plugin on a couple of different pages. In both instances, the order of displayed strings is a little bit messed up.

例1：基本上他们是按字母顺序排列，除了常识已经被推到了顶部：字符串数组

Example 1: array of strings: basically they are in alphabetical order except for General Knowledge which has been pushed to the top:

常识，艺术与设计，商科，公民，设计与技术，英语，地理，历史，信息和通信技术，数学，MFL法语，MFL德语，MFL西班牙语，音乐，体育，PSHE，宗教教育，科学，别的东西。

General Knowledge,Art and Design,Business Studies,Citizenship,Design and Technology,English,Geography,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else

显示的字符串：

常识，地理，艺术和设计，商科，公民，设计与技术，英语，历史，信息和通信技术，数学，MFL法语，MFL德语，MFL西班牙语，音乐，体育，PSHE，宗教教育，科学，别的东西。

General Knowledge,Geography,Art and Design,Business Studies,Citizenship,Design and Technology,English,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else

需要注意的是地理学已被推成为第二个项目，常识了。其余的都很好。

Note that Geography has been pushed to be the second item, after General Knowledge. The rest are all fine.

例2：字符串数组：同上，但与跨学科，而不是常识

Example 2: array of strings: as above but with Cross-curricular instead of General Knowledge.

跨学科，艺术与设计，商科，公民，设计与技术，英语，地理，历史，信息和通信技术，数学，MFL法语，MFL德语，MFL西班牙语，音乐，体育，PSHE，宗教教育，科学，别的东西。

Cross-curricular,Art and Design,Business Studies,Citizenship,Design and Technology,English,Geography,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else

显示的字符串：

跨学科，公民，艺术与设计，商科，设计与技术，英语，地理，历史，信息和通信技术，数学，MFL法语，MFL德语，MFL西班牙语，音乐，体育，PSHE，宗教教育，科学，别的东西。

Cross-curricular,Citizenship,Art and Design,Business Studies,Design and Technology,English,Geography,History,ICT,Mathematics,MFL French,MFL German,MFL Spanish,Music,Physical Education,PSHE,Religious Education,Science,Something Else

在这里，公民一直推到2号位。

Here, Citizenship has been pushed to the number 2 position.

我试验了一下，好像有说：把东西具有相同字母作为第一个项目之后的第一个项目开始，离开休息孤独的错误。神秘的种类。我尝试了一下调试通过触发自动完成插件code里面的警报，但我到处都可以看到，它使用了正确的顺序。这似乎只是当它呈现出它出错。

I've experimented a little, and it seems like there's a bug saying "put things that start with the same letter as the first item after the first item and leave the rest alone". Kind of mystifying. I've tried a bit of debugging by triggering alerts inside the autocomplete plugin code but everywhere i can see, it's using the correct order. it seems to be just when its rendered out that it goes wrong.

任何想法的人？
最大

Any ideas anyone? max

编辑 - 回复克林特

感谢您在code的相关位指着我顺便说一句。为了使诊断更简单的I值的数组更改为[萝卜，苹果，樱桃]，它自动完成重复订单[萝卜，樱桃，苹果。

Thanks for pointing me at the relevant bit of code btw. To make diagnosis simpler i changed the array of values to ["carrot", "apple", "cherry"], which autocomplete re-orders to ["carrot", "cherry", "apple"].

下面是它生成stMatchSets数组：

Here's the array that it generates for stMatchSets:

stMatchSets =（{''：[＃1 = {值：胡萝卜，数据：[胡萝卜]，结果是：胡萝卜}，＃3 = {值：苹果，数据：[苹果]，结果：苹果}，＃2 = {值：樱桃，数据：[樱桃]，结果是：樱桃}]，C：[＃1＃，2＃]，一：[＃，3＃]}）

stMatchSets = ({'':[#1={value:"carrot", data:["carrot"], result:"carrot"}, #3={value:"apple", data:["apple"], result:"apple"}, #2={value:"cherry", data:["cherry"], result:"cherry"}], c:[#1#, #2#], a:[#3#]})

因此​​，它的收集第一字母连成一个图，它是有意义的作为第一通匹配策略。我想它做的虽然是使用值给定的数组，而不是地图，当涉及到填充显示的列表。我不能完全得到我的头周围正在发生的事情与code的胆量内部缓存（我不是非常有经验的JavaScript）。

So, it's collecting the first letters together into a map, which makes sense as a first-pass matching strategy. What i'd like it to do though, is to use the given array of values, rather than the map, when it comes to populating the displayed list. I can't quite get my head around what's going on with the cache inside the guts of the code (i'm not very experienced with javascript).

解决 - 我在插件黑客的JavaScript解决了这个结果。
在线路549（或565），我们返回一个变量Csub的是保持匹配数据的对象。它的回来之前，我这个重新排序，这样的秩序价值的原始数组，我们分别给予，也就是我们用来建设摆在首位，这是我已经投入另一个变量的指数相匹配：

SOLVED - i fixed this by hacking the javascript in the plugin.
On line 549 (or 565) we return a variable csub which is an object holding the matching data. Before it's returned, I reorder this so that the order matches the original array of value we were given, ie that we used to build the index in the first place, which i had put into another variable:

Csub的= csub.sort（功能（A，B）{返回originalData.indexOf（a.value中）> originalData.indexOf（b.value）;}）

csub = csub.sort(function(a,b){ return originalData.indexOf(a.value) > originalData.indexOf(b.value); })

哈克，但它的工作原理。我个人认为，这种行为（可能是codeD更干净）应插件的默认行为：即结果的顺序应该尽可能值的原始传递的数组匹配。这样，用户就可以自己进行排序按字母顺序排列，如果他们想（这是微不足道的），以获得按字母顺序排列的结果，也可以preserve自己的自定义命令。

hacky but it works. Personally i think that this behaviour (possibly coded more cleanly) should be the default behaviour of the plugin: ie, the order of results should match the original passed array of possible values. That way the user can sort their array alphabetically if they want (which is trivial) to get the results in alphabetical order, or they can preserve their own 'custom' order.

推荐答案

我做了什么，而不是你的解决方案是添加

What I did instead of your solution was to add

if (!q && data[q]){return data[q];}

上方

var csub = [];

在网上发现〜535。

found in line ~535.

这做什么，如果我理解正确的话，是取了当输入为空缓存的数据，在行〜472规定： stMatchSets [] = [] 。假设当输入为空缓存的数据，你提供给从第一个数据，那么它的都不错。

What this does, if I understood correctly, is to fetch the cached data for when the input is empty, specified in line ~472: stMatchSets[""] = []. Assuming that the cached data for when the input is empty are the first data you provided to begin with, then its all good.

这篇关于jQuery和QUOT;自动完成＆QUOT;插件是搞乱我的数据的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！