JQuery自动完成清除以前数据的文本框？

Question

我在文本字段上有一个 jquery 自动完成功能，并且我正在使用一种 hacky 方式来允许在同一个文本框中多次自动完成功能。基本上，您可以用逗号分隔一个值，然后正则表达式匹配器将仅在最终值之后尝试匹配该术语。例如，我可以在文本框中输入 dog、cat、pi，而 jquery 将为 pig 自动完成，因为我只将“pi”传递给自动完成。我的方法的唯一问题是，如果用户点击自动完成功能，那么所有以前的数据（狗、猫）都会消失并被自动完成值“猪”取代。关于如何在不删除以前数据的情况下点击建议的任何想法？

   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());
                    }
                });


});

I added the 2 event listeners in your code so when a selection occurs it saves the string in a buffer before it is changed.然后，当它被更改时，它会在自动完成值之前添加该文本。