Question

我在文本字段上有一个jquery自动完成功能，我使用hacky方式在同一文本框中多次允许自动完成。基本上你可以用逗号分隔一个值然后一个正则表达式匹配器将尝试仅在最终值之后匹配该术语。例如，我可以在文本框中输入dog，cat，pi，jquery将自动完成猪的自动完成，因为我只通过＆＃34; pi＆＃34;到自动完成。我的方法唯一的问题是，如果用户点击自动完成要约，则所有先前的数据（狗，猫）都会消失，并被自动完成值替换为＃34; pig＆＃34;。有关如何在不删除以前数据的情况下点击建议的任何想法？

   function filterResults(myList, matcher) {
                    var retGrep = new Array();
                    for (var i = 0; i < myList.length; i++) {
                        if (matcher.test(myList[i])) {
                            retGrep.push(myList[i]);
                        }
                    }
                    return retGrep;
                }
                $("#title").autocomplete({
                    source: function(request, response) {
                        if(request.term.indexOf(',') != -1){
                            var re = $.ui.autocomplete.escapeRegex(request.term.substr(request.term.lastIndexOf(',') + 1));
                        }else{
                            var re = $.ui.autocomplete.escapeRegex(request.term);
                        }
                            var matcher = new RegExp("^" + re, "i");
                            var results = filterResults(titleList, matcher);
                            response(results.slice(0, 5));

                    },
                    messages: {
                        noResults: '',
                        results: function() {}
                    }
                });

Answer 1

所以这是一个修复程序，无需修改实际的插件。

http://jsfiddle.net/w4p6s002/1/

$(document).ready(function(){
    var buffer ="";
    function filterResults(myList, matcher) {
                    var retGrep = new Array();
                    for (var i = 0; i < myList.length; i++) {
                        if (matcher.test(myList[i])) {
                            retGrep.push(myList[i]);
                        }
                    }
                    return retGrep;
                }
                $("#title").autocomplete({
                    source: function(request, response) {
                        if(request.term.indexOf(',') != -1){
                            var re = $.ui.autocomplete.escapeRegex(request.term.substr(request.term.lastIndexOf(',') + 1));
                        }else{
                            var re = $.ui.autocomplete.escapeRegex(request.term);
                        }
                            var matcher = new RegExp("^" + re, "i");
                            var results = filterResults(["taco","pig","help"], matcher);
                            response(results.slice(0, 5));

                    },
                    messages: {
                        noResults: '',
                        results: function() {

                        }
                    },
                    select: function( event, ui ) {
                        buffer = $("#title").val().substring(0,$("#title").val().lastIndexOf(",")+1);
                    }, 
                    close: function( event, ui ) {
                        $(this).val(buffer + $("#title").val());
                    }
                });


});

我在您的代码中添加了2个事件侦听器，因此当选择发生时，它会在更改之前将字符串保存在缓冲区中。然后，当它被更改时，它会在自动完成值之前添加该文本。

JQuery Autocomplete清除以前数据的文本框？

1 个答案: