jquery自動完成「幾乎」工作，但列表並沒有完全填充

我想在jQuery中使用自動完成，它與演示數據，但我一直無法使它與我自己的數據源。我試圖編寫一封郵件，其中用戶只需輸入一個人姓名的幾個字母，聯繫人數據庫可幫助自動填充，以便相應的電子郵件顯示在「收件人」字段中。jquery自動完成「幾乎」工作，但列表並沒有完全填充

我已經包含了以下文件：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

在document.load我的jQuery代碼如下：

$(function() { 
    function log(message) { 
     $('#to').append(message); 
     console.log(message); 
    } 

    $("#search").autocomplete({ 
     source: "search.php", 
     minLength: 2, 
     select: function(event, ui) { 
    log(ui.item? ui.item.email : "NO"); 
     } 
    }); 
});

而我的HTML是：

<div class='ui-widget'><input type='text' class='medium' id='search' /></div> <br /> 
To:<br /> 
<div class='ui-widget'> <textarea type='text' style='width:80%; height:24px;' id='to' class='ui-widget-content'></textarea></div>

結果的search.php沒有問題，只要考慮到json，下面是按下字母「Ahmed」時的輸出示例：

[{"email":"[email protected]","name":"Ahmed Qasim"},{"email":"[email protected]","name":"Ahmed Abbas"},{"email":"[email protected]","name":"Ahmed Sahdi"}]

我知道我得到的search.php從這個反應，因爲我檢查螢火蟲看到它，但它並不下方的搜索輸入字段中顯示的......相反，什麼是顯示只是一個列表的樹樁......如下圖所示。

enter image description here

但這同樣的事情工作時，我這裏使用的演示代碼預期：demo爲什麼不顯示在列表中正確？可以顯示多少數據有限制嗎？我從我得到的JSON輸出中只粘貼了3個條目，但有數十條。

來源

2013-01-06 user961627

從服務器返回的內容包含email和name字段，jquery ui需要value和label字段。

[{"label":"Ahmed Abbas", value: "Ahmed Abbas"}]

label是你自動完成列表上看到，和value是當你選擇一個項目，你將得到的值。

來源

2013-01-06 17:14:16 keune

我覺得keune有正確的診斷。如果你不想改變search.php的輸出，你可以做這樣的事情：

  $("#search").autocomplete({ 
       source: function (request, response) { 

        $.ajax({ 
         url: "search.php", 
         type: "POST", 
         dataType: "json", 
         data: { searchText: myQuery, maxResults: 10 }, 
         success: function(data) { 
          var mappedData = $.map(data, 
           function(item) { 
            return { 
             label: item.name, 
             value: item.email, 
             id: item.email 
            }; 
           }); 

          response(mappedData); 
          } 
         }); 
       }, ....

來源

2013-01-06 17:29:49 Tyler

我們應該能夠投票接受答案的變化。這與OP的問題（和我的）更相關，當現有數據饋送無法更改以匹配某個UI小部件的默認設置時。 –

jquery自動完成「幾乎」工作，但列表並沒有完全填充

回答

相關問題