Question

我想自定义jquery自动完成的搜索行为，现有代码在

下面

var data    = [

       {"url":"http://site/test.php",    "label":" test course"}]

             $k(".input").autocomplete({
            max:10,
            source: data,
            multipleSeparator: " ",
            select: function( event, ui ) { 
                window.location.href = ui.item.url;
            },
            appendTo: "#results",
            open: function() {
                var position = $("#results").position(),
                    left = position.left, top = position.top;

                $("#results > ul").css({left: left + 20 + "px",
                                        top: top + 4 + "px" });

            }
        });

我需要忽略数据中的空格（搜索数据）。

假设我输入“testcourse”，我必须得到“测试课程”的结果。

如何做到这一点。

Answer 1

复制data中具有相同条目的空白区域且label不同（没有空格）的任何值。

var data    = [
   {"url":"http://site/test.php",  "label":" test course"},
   {"url":"http://site/test.php",  "label":" testcourse"}
];

以下是一种循环浏览data的方法，并在删除空格时添加任何不相同的项目：

for(i = 0; i < data.length; i++){
    var noWhsp = data[i].label.replace(/\s/g, '');
    if(data[i].label !== noWhsp){
        data.push({"url":data[i].url,  "label":noWhsp})
    }
}

Answer 2

只需在没有空格的数据中添加另一个json值。

var data    = [
   {"url":"http://site/test.php",  "label":" test course", "search_term":"testcourse"},
];

使用搜索词进行搜索并显示标签

或

    var data    = [
       {"url":"http://site/test.php",  "label":" test course_testcourse"},
];

通过“_”符号听取分割标签值并使用标签[1]进行搜索并获取结果值标签[0]

Answer 3

我实现了它，Code低于

$k("#autocomplete").autocomplete({
        max:10,
        source: function(req, responseFn) {
            var re = $k.ui.autocomplete.escapeRegex(req.term).toUpperCase();
            re = re.replace(/\s+/g, "")
            var matcher = new RegExp(".*"+$.trim(re).replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "")+".*");
            var a = $k.grep( data, function(item,index){
                return matcher.test(item.label.toUpperCase().replace(/\s+/g, ""));
            });
         responseFn( a );
        },
        matchContains: true, 
        multipleSeparator: "",
        multiple: true,
        select: function( event, ui ) { 
            window.location.href = ui.item.url;
        },
        appendTo: "#results",
        open: function() {
            var position = $("#results").position(),
                left = position.left, top = position.top;

            $("#results > ul").css({left: left + 20 + "px",
                                    top: top + 4 + "px" });

        }
});

如何自定义jquery自动完成搜索机制

3 个答案: