Question

我目前正在尝试创建一个简单的jQuery自动完成UI，其中搜索词被发送回PHP后端，后端又查询MySQL数据库以匹配术语并发回结果。这工作正常。除此之外，如果我输入3-4个空格，它也会发送一个请求，这将返回后端的所有结果。我如何配置jQuery自动完成，以便无论输入什么术语，应该到后端的搜索术语应该修剪其前导和尾随空格，并且在修剪后，如果发现它是空字符串，则不发送请求一点都没有？

我在SO中找到了多个示例，但所有这些示例都包含一个内置的术语数组作为示例，如果source参数的值是远程URL，我无法弄清楚如何配置$("#myinput").autocomplete({ source: "http://127.0.0.1:8000/autoComplete/", appendTo: "#search-holder", response: function(e,y) {} });参数：

masonry

Answer 1

这个没有简单的答案。我认为search事件允许一个术语覆盖但是它没有。 Nagaraju的回答是正确的，只是他没有显示实际的实施。这是它应该是什么样子

$( "#myinput" ).autocomplete({
    source : function(request, response){
      //trim the input value
      request.term = request.term.trim();
      if(request.term == ""){
          //when empty, returns empty result
          response([]);
      }else{
          //our own implementation of request to the server
          $.get("http://127.0.0.1:8000/autoComplete/?term=" + request.term, 
            function(data) {
                response(data);
            });
      }
   }
});

Answer 2

更新您的source功能，如下所示：

    source: function( request, response ) {
       //Remove spaces 
      var matcher = new RegExp($.trim(request.term).replace(/ +/g, ""), "i" );
      response($.grep(resources, function(value) {
         return matcher.test( value);
      }));   
    }

Answer 3

使用"quit\n"从字符串的结尾和开头删除空格？ https://api.jquery.com/jQuery.trim/

或者你可以在后端做到。 http://php.net/manual/en/function.trim.php

编辑：当您加载页面并将其存储在数组中时，为什么不通过AJAX调用获取所有可用的自动完成功能。这样，只有在加载页面时，DB才会被打扰，而不是每次输入字段发生变化时。这也需要DB的一些工作量，并且空白区域不会成为问题。

jQuery在向远程URL发送请求时忽略前导空格和尾随空格

3 个答案: