jQuery UI的自動完成返回一個空值與有效的json

我想通過遵循jQuery UI文檔來獲得自動完成功能。這是我第一次嘗試這樣的事情，所以我不能100％確定這裏有什麼問題。jQuery UI的自動完成返回一個空值與有效的json

的JSON：

[ 
    { 
     "plugin_name": "NoSwear" 
    }, 
    { 
     "plugin_name": "AaaaahDeath" 
    }, 
    { 
     "plugin_name": "aAntiSpam" 
    }, 
    { 
     "plugin_name": "Abacus" 
    }, 
    { 
     "plugin_name": "abag" 
    }, 
    { 
     "plugin_name": "AbandonedCarts" 
    }, 
    { 
     "plugin_name": "AbbaRules" 
    }, 
    { 
     "plugin_name": "Abilities" 
    }, 
    { 
     "plugin_name": "AbilityTrader" 
    }, 
    { 
     "plugin_name": "AbitOfRealism" 
    } 
]

的JavaScript：

$(function() { 
    function split(val) { 
     return val.split(/,\s*/); 
    } 
    function extractLast(term) { 
     return split(term).pop(); 
    } 
    $("#plugins") 
     .bind("keydown", function(event) { 
      if(event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) { 
       event.preventDefault(); 
      } 
     }) 
     .autocomplete({ 
      source: function(request, response) { 
       $.getJSON("bukget_json.php", { 
        term: extractLast(request.term) 
       }, response); 
      }, 
      search: function() { 
       var term = extractLast(this.value); 
       if(term.length < 2) { 
        return false; 
       } 
      }, 
      focus: function() { 
       return false; 
      }, 
      select: function(event, ui) { 
       var terms = split(this.value); 
       terms.pop(); 
       terms.push(ui.item.value); 
       terms.push(""); 
       this.value = terms.join(", "); 
       return false; 
      } 
     }); 
});

的HTML：

<div class="form-group ui-widget"> 
<label for="plugins">Plugins</label> 
<input type="text" class="form-control" id="plugins" name="plugins" /> 
</div>

最後，這一切的結果是，有沒有出結果。以下是我所看到的截圖：http://d.pr/i/yh5N。

來源

2014-01-27 user1710563

您可以檢查以下內容：jsFiddle.

只需使用$("#plugins").autocomplete，而不是綁定和自動完成。

來源

2014-01-27 22:33:22 Siva

使用此代碼...而不是$.ajax可以使用$.get也

$("input.suggest-user").autocomplete({ 
    source: function(request, response) { 

    $.ajax({ 
     dataType: "json", 
     type : 'Get', 
     url: 'yourURL', 
     success: function(data) { 
      $('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image 

     response($.map(data, function(item) { 
      // your operation on data 
     })); 
     }, 
     error: function(data) { 
      $('input.suggest-user').removeClass('ui-autocomplete-loading'); 
     } 
    }); 
    }, 
    minLength: 3, 
    open: function() { 

    }, 
    close: function() { 

    }, 
    focus:function(event,ui) { 

    }, 
    select: function(event, ui) { 

    } 
});

來源

2014-01-28 06:16:22

jQuery UI的自動完成返回一個空值與有效的json

回答

相關問題