JQuery自動完成在頁面上沒有顯示

Question

我有問題讓這個JQuery AJAX顯示在網頁上。

$(document).ready(function(e) { 
    $(".autocomp").autocomplete(
     { 
      source: function(request, response) { 
         $.ajax({ 
           url: "/apples", 
           dataType: "json", 
           data: { 
           srch:request.term 
           }, 
           success: function(data) { 
            response($.map(data.result, function(item) { 
             return { 
              label: item.name,  
              value: item.name, 
              data: item 
             }; 
            })); 
           } 
          }); 
        }, 
        minLength: 2, 
        select: function(event, ui){ 
            var parts = this.name.match(/(\D+)(\d+)$/); 
            $("key_"+parts[2]).val(ui.item.data.key); 
           } 
        }); 
}); 

該函數調用返回信息的網站：{result: [{name:macintosh,key:1},{name:golden,key:2},{name:fuji,key:3}]}。 數據字段發送回的對象是：

Object {result= [Object{name:macintosh,key:1},Object{name:golden,key:2},Object{name:fuji,key:3}]} 

的HTML：

<input type="text" name="name_1" id="name_1" class="autocomp"><input type="hidden" name="key_1" id="key_1"> 

任何人有一個想法，爲什麼它不工作？我進口

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 

和樣式表：

<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 

任何幫助將不勝感激！

Answer 1

該解決方案來自WebTuts網站。它現在可以工作，但它不會使用AJAX調用 - 我仍然很想知道該怎麼做。這是一個解決方案，並得到相同的結果，但沒有明確回答如何使用AJAX的問題。用這個部分替換$ .ajax部分。

$.getJSON("/apples?srch="+request.term,request, 
         function(data){ 
          var names = []; 
          $.each(data.result, function(i, val){ 
           names.push({ 
            label: val.name, 
            value: val.name, 
            data: val 
           }); 
          }); 
          response(names); 
         }); 

謝謝大家！ 喬恩