javascript - 如何让 jQuery UI 自动完成功能忽略标点符号，但显示它？

Question

我正在尝试让 jQuery UI 自动完成 忽略标点符号。我目前有一个存储在 availableTags 中的对象array，如下所示:

 [{'label':'AA RS20.0-4', 'value':'AA RS2004'},
 {'label':'AA AF-20.0-5', 'value': 'AA AF2005'},
 {'label':'ALL 2000 SERIES', 'value':'ALL 2000 SERIES'},
 {'label':'ALL 2000MH', 'value':'ALL 2000MH'}] 

基本上，我需要根据 value 中存储的值设置自动完成过滤器，但显示 label 中存储的值。
当我输入 "200" 时，我的问题出现了。理想情况下，应显示所有结果。

我当前的代码:

$('#entermod').autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term.replace(/[^a-zA-Z0-9\s]/, ""));
        console.log(results);
        response(results.slice(0, 10));},           
    minLength : 3
}).data('ui-autocomplete')._renderItem = function(ul, item) {
    return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "</a>" )
            .appendTo( ul );
};

我需要更改什么才能使其正常工作？或者我是否需要采取完全不同的方法来应对这种情况？

Answer 1

首先，您的上述代码似乎有错误。

1. 它没有完成 ' 和 }。
2. 您将使用jquery autocomplete，其源代码为:

Array: An array can be used for local data. There are two supported formats: An array of strings: [ "Choice1", "Choice2" ] An array of objects with label and value properties:
[ { label: "Choice1", value: "value1" }, ... ]

此处，标签用作键，显示的选项为值。

因此，在我认为 label 和 value 互换的代码中，只有两个 label 与过滤器匹配。

所以，这是您更正后的代码:

JS

var availableTags = 
[{'value':'AA RS20.0-4', 'label':'AA RS2004'},
 {'value':'AA AF-20.0-5', 'label': 'AA AF2005'},
 {'value':'ALL 2000 SERIES', 'label':'ALL 2000 SERIES'},
 {'value':'ALL 2000MH', 'label':'ALL 2000MH'}] ;

$('#entermod').autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term.replace(/[^a-zA-Z0-9\s]/, ""));
        console.log(results);
        response(results.slice(0, 10));
    },           
    minLength : 3
}).data('ui-autocomplete')._renderItem = function(ul, item) {
    return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.value + "</a>" )
            .appendTo( ul );
    }

看看这里并检查它是否工作:

<强> DEMO