Question

我需要一些帮助。我正在尝试添加jQuery UI自动完成，

$("#search").autocomplete({ source: $post });

对于下面的代码，我不确定如何去做...

// Communication to PHP file

function searchq() {    
    var searchTxt = $("input[name='search']").val();

    $.post("tagasearch.php", {searchVal: searchTxt}, function(output){
        $("#output").html(output);
    });
};

他们现在正在使用的代码是以

的形式打印到HTML

<div id="output"></div>

Answer 1

也许您没有在页面中包含正确的CSS？另外，我不确定只将$ post作为来源。我通常做这样的事情：

 <input type="text" id="search">

 <script>
    jQuery('#search').autocomplete({
       source: function(request, response) {    

          jQuery.ajax({ url: toCall,
             dataType: "json",
             data: { term: request.term },
             success: function(data) {
                response(data);
              }
          });

     } //whatever other setup you want for autocomplete like minLength, etc.
   });

 </script>

Answer 2

Scott's answer是正确的，但没有解释。我会尝试稍微扩展它。

首先请注意，$("#search")是id选择器，而不是name。如果您的输入只有name=search，则可以使用$("[name=search]")

进行选择

接下来，您的PHP页面看起来需要一个名为searchVal的参数。如果您将其重写为term（这是自动填充的默认request参数），您可以像将帖子的网址传递到source选项一样简单：

$("input[name=search]").autocomplete({ source: "tagasearch.php" });

第三，如果您使用search: function()选项值，您可以自定义它或其响应（如Scott建议的那样）：

$("input[name=search]").autocomplete({
   source: function(request, response) {
      $.post("tagasearch.php", {
            searchVal: request.term
            //                ^-- request.term is the string you've typed in the input
      }, response);
      // ^-- response is the callback passed by jQueryUI
      //
      // it expects a single parameter which it treats as the data for the widget

      // Just using response in the above function is exactly equivalent to:
      $.post("tagasearch.php", {searchVal: request.term},
           function(output) {
               response(output);
           }
      );
 }

The documentation拥有您需要的所有信息;还有a couple of useful examples

JQUERY UI .auto-complete

2 个答案: