2015-09-12 32 views
0

我在我的文章追踪应用程序中使用select2进行标记搜索,并且我注意到当你开始输入时,说“m”,“mi”,你会认为'迁移'会先突出显示,有'm',就像表格一样。正如照片所示,“形式”首先出现,这让您搜索得越多,就会变得非常烦人。如何让select2搜索按字母顺序开始?

如果你输入“mi”,我期望任何以'mi'开头的东西首先出现,而不是包含m和i的'forms-middle'。你如何根据拼写正确地选择2个查找标签?谢谢

的是没有工作因为某种原因,也不是在文档默认提供的答案是:

<select style="width:90%;" multiple="multiple" id="selected_tags" name="selected_tags"> 
     {% for tag in tags %}   
      <option value="{{tag.slug}}">{{tag.name}}</option> 
     {% endfor %} 
    </select> 

.... 


$(document).ready(function() { 
    $("#selected_tags").select2({ 
     sortResults: function(results, container, query) { 
      if (query.term) { 
       // use the built in javascript sort function 
       return results.sort(function(a, b) { 
        if (a.text.length > b.text.length) { 
         return 1; 
        } else if (a.text.length < b.text.length) { 
         return -1; 
        } else { 
         return 0; 
        } 
       }); 
      } 
      return results; 
     } 
    }); 
}); 

enter image description here

+0

你尝试阅读文档? – Nit

+0

https://select2.github.io/examples.html这就是我看到的 – codyc4321

+0

可能的重复[Select2 - 通过查询排序结果](http://stackoverflow.com/q/31991217/359284#32106792) –

回答

1

您可以排序结果请检查documentation here。根据查询的字符串索引进行排序。您可以使用javascript构建sort()方法对结果数组进行排序。

$("#e1").select2({ 
 
    sortResults: function(results, container, query) { 
 
    console.log(query); 
 
    if (query.term) { 
 
     // use the built in javascript sort function 
 
     return results.sort(function(a, b) { 
 
     console.log(a.text.indexOf(query),b.text.indexOf(query)); 
 
     if (a.text.indexOf(query.term) > b.text.indexOf(query.term)) { 
 
      return 1; 
 
     } else if (a.text.indexOf(query.term) < b.text.indexOf(query.term)) { 
 
      return -1; 
 
     } else { 
 
      return 0; 
 
     } 
 
     }); 
 
    } 
 
    return results; 
 
    } 
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script> 
 
<select id="e1"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="WY">Wyoming</option> 
 
    <option value="WY">sdsd</option> 
 
    <option value="WY">aasd</option> 
 
    <option value="WY">aaas</option> 
 
    <option value="WY">qwer</option> 
 
    <option value="WY">sqwqw</option> 
 
    <option value="WY">cxncmx</option> 
 
    <option value="WY">snamsnam</option> 
 
</select>

+0

如果您要直接从文档中复制粘贴代码,请至少链接到它。 – Nit

+0

@Nit:请稍候,我会更新,,,,, –

+0

他们很清楚地使用新版本的Select2,这只适用于旧版本。 –