Question

我已经检查了几个这样的解决方案：

jQuery UI Autocomplete Multiple Values in Textbox
jQuery UI Autocomplete Multiple Values

没有成功。我有一个jQuery UI自动完成工作非常好，除了包含空格的搜索短语。例如，我将搜索“真实”并获得结果列表，但如果我输入“房地产”，它会在“真实”之后爆炸。

这是我目前正在使用的代码，直到在文本框中添加空格：

<script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' },
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});

以下是我从上面链接尝试的一些代码，但继续收到“未捕获的TypeError：无法读取属性'自动完成'未定义”错误

<script type="text/javascript">   
$(document).ready(function () {
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term) },
                dataType: 'json',
                success: function(jsonData) {
                    var re = $.ui.autocomplete.escapeRegex(request.term); // errors out here
                    var matcher = new RegExp( "^" + re, "i" );
                    response($.grep(jsonData, function(item){return matcher.test(item.value);}) );
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});

当我调试它时，除了我已经提到的错误之外，我没有得到太多细节（不是强大的前端开发）。

Answer 1

经过进一步测试后，我发现问题出在我放置的地方并编码了我的参数。下面的代码是我开始的：

<script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' }, // problem here
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});  

</script>

这就是我最终的结果。注意我删除了data属性，只创建了一个查询字符串。

    <script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx?searchtext=' + encodeURIComponent(request.term) + '&langspecific=1', // resolved
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});  

</script>

jQuery UI自动完成具有多个值的ajax

1 个答案: