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

【问题标题】：jQuery UI autocomplete ajax with multiple values具有多个值的 jQuery UI 自动完成 ajax
【发布时间】：2016-04-21 23:12:09
【问题描述】：

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

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

这是我从上面的链接尝试的一些代码，但继续收到“Uncaught TypeError: Cannot read property 'autocomplete' of undefined”错误

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

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

【问题讨论】：

我认为 you should try this way 使用 .php 样式
不确定@hmd 使用“.php 样式”是否会有所帮助。正如我所说，第一个代码块除了搜索任何有空格的东西外都可以工作。
那么，你比较了'with space'和'without space'的请求头和响应吗？它应该与您的 ajax 请求相同，您可以在浏览器的开发人员工具中找到。
我没有。我经常忘记那些做所有后端编程的事情。我看看能不能比较和跟进。
请求和响应数据是什么样的（在 Firebug 或 Fiddler 中）？是否可以，或者在什么时候数据与您的预期不同？

标签： jquery ajax jquery-ui autocomplete

【解决方案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>

【讨论】：