2011-02-08 39 views
4

我试图修改在http://jqueryui.com/demos/autocomplete/#multiple发现使用从我的数据库中生成的,而不是使用列表中的数据jQuery UI的自动完成从数据库

 

    $(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()函数,但我没有运气。

谢谢!

+0

是_generate_keywords.php_正确响应打电话给你的服务器?它的回应是什么样的? – Shrinath 2011-02-08 02:27:33

+0

是的,generate_keywords.php给出以下JSON输出: [{“id”:“48”,“label”:“COMP_DATABASES”},{“id”:“37”,“label”:“COMP_GAMES” },{ “ID”: “15”, “标签”: “COMP_GENERAL”},{ “ID”: “34”, “标签”: “COMP_HARDWARE”},{ “ID”: “31”, “标签” : “COMP_LINUX”},{ “ID”: “36”, “标签”: “COMP_NETWORKING”},{ “ID”: “55”, “标签”: “COMP_PALM”},{ “ID”: “14” ,“label”:“COMP_SECURITY”},{“id”:“33”,“label”:“COMP_SOFTWARE”}] – ShinobiDev 2011-02-08 02:31:23

回答

0
$(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; 
      } 
     }); 
    });