Jquery自動完成功能不起作用

我從jquery ui demo得到了以下代碼。我做了一些小修改。這是修改的代碼。Jquery自動完成功能不起作用

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Autocomplete - Custom data and display</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <!--link rel="stylesheet" href="/resources/demos/style.css"--> 
    <style> 
    #project-label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 1em; 
    } 
    #project-description { 
    margin: 0; 
    padding: 0; 
    } 
    </style> 
    <script> 
    $(function() { 
    var projects = [ 
     { 
     id: "jquery", 
     name: "jQuery", 
     location: "the write less, do more, JavaScript library" 
     }, 
     { 
     id: "jquery-ui", 
     name: "jQuery UI", 
     location: "the official user interface library for jQuery" 
     }, 
     { 
     id: "sizzlejs", 
     name: "Sizzle JS", 
     location: "a pure-JavaScript CSS selector engine" 
     } 
    ]; 

    $("#project").autocomplete({ 
     minLength: 0, 
     source: projects, 
     focus: function(event, ui) { 
     $("#project").val(ui.item.name); 
     return false; 
     }, 
     select: function(event, ui) { 
     $("#project").val(ui.item.name); 
     $("#project-id").val(ui.item.id); 
     $("#project-description").html(ui.item.location); 

     return false; 
     } 
    }) 
    .data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<a>" + item.name + "<br>" + item.location + "</a>") 
     .appendTo(ul); 
    }; 
    }); 
    </script> 
</head> 
<body> 

<div id="project-label">Select a project (type "j" for a start):</div> 
<input id="project"> 
<input type="hidden" id="project-id"> 
<p id="project-description"></p> 


</body> 
</html>

現在jquery只有在按'j'鍵時纔會彈出自動補全建議。其他鍵的它什麼都不做。我在這裏做錯了什麼？

來源

2014-02-22 DamithK

這將是很高興有一個jsfiddle這個。 – reergymerej

小提琴http://jsfiddle.net/arunpjohny/rh8n7/1/ –

這是由於默認搜索機制，它根據字段label或value過濾內容。

與自定義的數據，這是更好地實現源法喜歡自己，

$("#project").autocomplete({ 
    minLength: 0, 
    source: function (request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     var array = $.grep(projects, function (value) { 
      return matcher.test(value.id) || matcher.test(value.name) || matcher.test(value.location); 
     }); 
     response(array); 
    }, 
    focus: function (event, ui) { 
     $("#project").val(ui.item.name); 
     return false; 
    }, 
    select: function (event, ui) { 
     $("#project").val(ui.item.name); 
     $("#project-id").val(ui.item.id); 
     $("#project-description").html(ui.item.location); 

     return false; 
    } 
}) 
    .data("ui-autocomplete")._renderItem = function (ul, item) { 
    return $("<li>") 
     .append("<a>" + item.name + "<br>" + item.location + "</a>") 
     .appendTo(ul); 
};

演示：Fiddle

來源

2014-02-22 02:52:08

您必須在您的項目陣列上的value屬性：

var projects = [ 
     { 
      id: "jquery", 
      name: "jQuery", 
      value:"jQuery", 
      location: "the write less, do more, JavaScript library" 
     }, 
     ... 
     { 
      id: "sizzlejs", 
      name: "sizzle JS", 
      value:"sizzle JS", 
      location: "a pure-JavaScript CSS selector engine" 
     } 
    ];

這樣搜索引擎就可以工作了。

來源

2014-02-22 02:54:01

謝謝。只是在autocomplete api文檔中查看了源代碼選項。它說：「具有標籤和值屬性的對象數組：[{label：」Choice1「，value：」value1「}，...]」 – DamithK

Jquery自動完成功能不起作用

回答

相關問題