jQuery UI的自動完成從數據庫

Question

我試圖修改在http://jqueryui.com/demos/autocomplete/#multiple發現使用從我的數據庫中生成的，而不是使用列表中的數據

 

    $(function() { 
     var availableTags = [ 
      "ActionScript", 
      "AppleScript", 
      "Asp", 
      "BASIC", 
      "C", 
      "C++", 
      "Clojure", 
      "COBOL", 
      "ColdFusion", 
      "Erlang", 
      "Fortran", 
      "Groovy", 
      "Haskell", 
      "Java", 
      "JavaScript", 
      "Lisp", 
      "Perl", 
      "PHP", 
      "Python", 
      "Ruby", 
      "Scala", 
      "Scheme" 
     ]; 
     function split(val) { 
      return val.split(/,\s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

     $("#tags") 
      // don't navigate away from the field on tab when selecting an item 
      .bind("keydown", function(event) { 
       if (event.keyCode === $.ui.keyCode.TAB && 
         $(this).data("autocomplete").menu.active) { 
        event.preventDefault(); 
       } 
      }) 
      .autocomplete({ 
       minLength: 0, 
       source: function(request, response) { 
        // delegate back to autocomplete, but extract the last term 
        response($.ui.autocomplete.filter(
         availableTags, extractLast(request.term))); 
       }, 
       focus: function() { 
        // prevent value inserted on focus 
        return false; 
       }, 
       select: function(event, ui) { 
        var terms = split(this.value); 
        // remove the current input 
        terms.pop(); 
        // add the selected item 
        terms.push(ui.item.value); 
        // add placeholder to get the comma-and-space at the end 
        terms.push(""); 
        this.value = terms.join(", "); 
        return false; 
       } 
      }); 
    }); 
    

編輯數據的代碼多值：我使用下面的代碼在其他頁面成功生成從我的數據庫單一的關鍵字所以我知道* generate_keywords.php *腳本工作並返回數據，但我想顯示多個現有的關鍵字，就像在jQuery的例子：

 $("#text-keywords").autocomplete({ 
     source: "generate_keywords.php", 
     minLength: 2, 
     select: function(event, ui) { 
      $('#text-keywords').val(ui.item.label); 
     } 
    }); 

但是，我不知道如何使用上面的示例代碼中的「函數（請求，響應）」從我的* generate_keywords.php *腳本返回數據。我玩過使用ajax（）函數，但我沒有運氣。

謝謝！

Answer 1

http://jqueryui.com/demos/autocomplete/#multiple-remote

檢查上面的鏈接。基本上，你必須通過「的getJSON」

 .autocomplete({ 
      //blah-blah-blah 
      source: function(request, response) { 
       $.getJSON("search.php", { 
        term: extractLast(request.term) 
       }, response); 
      }, 
      //blah-blah-blah 

Answer 2

$(function() { 
     function split(val) { 
      return val.split(/,\s*/); 
     } 

     function extractLast(term) { 
      return split(term).pop(); 
     } 
     $("#states_names").autocomplete({ 
      minLength: 4, 
      source: function(request, response) { 

       $.ajax({ 
//receives json array answer from the url 
        url: "search/state", 
        data: { 
         term: extractLast(request.term) 
        }, 
        dataType: "json", 
        type: "POST", 
        success: function(data) { 
         response(data); 
        }, 
        error: function() { 
         // added an error handler for the sake of the example 
         response($.ui.autocomplete.filter(
          ["opt1","opt2"] 
          , extractLast(request.term))); 
        } 
       }); 
      }, 
      focus: function() { 
       // prevent value inserted on focus 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 

       // remove the current input 
       terms.pop(); 

       // add the selected item 
       terms.push(ui.item.value); 

       // add placeholder to get the comma-and-space at the end 
       terms.push(""); 
       this.value = terms.join(","); 
       return false; 
      } 
     }); 
    });