jQuery jsonp自動完成無形下拉項目

Question

問題是，所有的下拉項目都是不可見的。自動完成的作品，我得到的項目，我可以選擇它們，焦點的輸入變化，光標更改爲懸停在下拉項目上的指針。我認爲這是一些CSS問題，但我還沒有想象它在幾個小時內...

Bellow是我的ajax和自動完成。一些評論：有一個data.shift（）去除第一個項目（我在下一步需要的一個變量，它沒有造成任何傷害）。在一些隱藏的輸入將被填充，目前一個被設置並被填充好。

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

和jQuery的：

$("#id_city").autocomplete({ 
delay: 1000, 
minLength: 0, 
source: function(request, response) { 
$.ajaxSetup({ 
    beforeSend: function(xhr, settings) { 
     function getCookie(name) { 
      var cookieValue = null; 
      if (document.cookie && document.cookie != '') { 
       var cookies = document.cookie.split(';'); 
       for (var i = 0; i < cookies.length; i++) { 
        var cookie = jQuery.trim(cookies[i]); 
        // Does this cookie string begin with the name we want? 
       if (cookie.substring(0, name.length + 1) == (name + '=')) { 
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
        break; 
       } 
      } 
     } 
     return cookieValue; 
     } 
     if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) { 
      // Only send the token to relative URLs i.e. locally. 
      xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken')); 
     } 
    } 
}); 
$.ajax({ 
url: '/country_auto/?country='+$("#id_country").val(), 
dataType: "jsonp", 
data: { 
search:$('#id_city').val() 
}, 
success: function(data) { 
data.shift(); 
response(data); 
} 
}); 
}, 
focus: function(event, ui) { 
$("#id_city").val(ui.item.city); 
return false; 
}, 
select: function(event, ui) { 
$("#id_city").val(ui.item.city); 
$('#id_latdeg').val(Number(ui.item.latdeg)); 
return false; 
}, 
}); 

JSON字符串看起來是這樣的：

([{"tz": "Europe/Bratislava", "city": "Handlova", "latmin": 43, "lon": "18E45",  
"latdeg": "48"}, {"tz":  "Europe/Bratislava", "city": "Hlohovec", "latmin": 25, 
"lon": "17E48", "latdeg": "48"}, {"tz":  "Europe/Bratislava", "city": "Humenne", 
"latmin": 56, "lon": "21E54", "latdeg": "48"}]) 

我認爲這種安排是正確的，它的工作原理。這只是下拉項目不可見...他們可以被選中，一切都是有效的，但他們不能被看到...任何人有一個想法如何解決這個問題？

Answer 1

因此，它現在正常工作。訣竅是，在下拉列表中的項目需要命名爲標籤..可能是某處寫的，但它在我將近16個小時內沒有找到我正在處理此問題...所以，以下是有效的工作：

服務器發送以下字符串：

([{"tz": "Europe/Bratislava", "label": "Banovce nad Bebravou", "latdeg": "48", 
"lonmin":15, "londeg": "18", "latmin": 43}, {"tz": "Europe/Bratislava", "label": 
"Banska Bystrica", "latdeg": "48", "lonmin": 9, "londeg": "19", "latmin": 44}, {"tz": 
"Europe/Bratislava", "label": "Bardejov", "latdeg": "49", "lonmin": 16, "londeg": 
"21", "latmin": 17}, {"tz": "Europe/Bratislava", "label": "Bratislava", "latdeg": 
"48", "lonmin": 6, "londeg": "17", "latmin": 8}, {"tz": "Europe/Bratislava", "label": 
"Brezno", "latdeg": "48", "lonmin": 38, "londeg": "19", "latmin": 48}]) 

所以城市現在被稱爲'標籤'。這是最重要的。重點和選擇的更改如下所示：

success: function(data) { 
response (data); 
} 
}); 
}, 
focus: function(event, ui) { 
$("#id_city").val(ui.item.label); 
return false; 
}, 
select: function(event, ui) { 
$('#id_city').val(ui.item.label); 
$('#id_latdeg').val(ui.item.latdeg); 

return false; 
}, 
}); 

Answer 2

自動完成要求建議數組中的項目使用非常特定的格式。從documentation：

陣列：數組可用於本地數據。有兩種支持格式：

• 字符串數組：[ "Choice1", "Choice2" ]
• 與標籤和值的屬性的對象數組：[ { label: "Choice1", value: "value1" }, ... ]

標籤屬性被顯示在建議菜單。當用戶選擇一個項目時，該值將被插入到輸入元素中。如果只指定了一個屬性，則它將用於兩個屬性，例如，如果僅提供值屬性，則該值也將用作標籤。

字符串：使用字符串時，自動填充插件期望該字符串指向將返回JSON數據的URL資源。它可以位於同一臺主機上或不同的主機上（必須提供JSONP）。自動填充插件不會過濾結果，而是會爲查詢字符串添加一個術語字段，服務器端腳本應該使用該字段來過濾結果。例如，如果源選項設置爲"http://example.com"，並且用戶鍵入foo，則會向http://example.com?term=foo發送GET請求。 數據本身可以採用與上述本地數據相同的格式。

由於您的數據不符合這些要求中的任何一個，所以您看不到任何結果（因爲小部件不知道如何顯示它們）。

有兩件事情可以做，以解決這個問題：

1. 提供了一些自定義的渲染和邏輯選擇，這樣的小部件如何呈現的建議​​：

   要做到這一點，你會要實現自定義_renderItem方法和實施select處理器（最有可能focus爲好，但實現基本相同）：

   $('#id_city').autocomplete({ 
       /* other options */ 
       select: function (event, ui) { 
        /* Set the input's value to the item's "city" property */ 
        this.value = ui.item.city; 
   
        // Prevent the default action, which is to place 
        // `item.value` in the field 
        event.preventDefault(); 
       } 
   }).data('ui-autocomplete')._renderItem = function (ul, item) { 
       return $('<li />') 
        .append($('<a />', { text: item.city })) 
        .appendTo(ul); 
   }; 
   

   例子：http://jsfiddle.net/3xcLpaLw/

2. 將您的數據轉換成自動完成構件預期的格式。

   的規範辦法做到這一點是使用$.map，轉化在響應對象的每個項目到一個新的對象，自動完成可以處理：

   source: function (request, response) { 
       /* your other code omitted for brevity */ 
   
       response($.map(data, function (item) { 
        // for every item in your response array, add a "label" and "value" 
        // property so that autocomplete can process the results. 
        // in various event handlers, the "item" parameter will still have 
        // the values you got from the server. 
        item.label = item.city; 
        item.value = item.city; 
   
        return item; 
       })); 
   } 
   

   例子：http://jsfiddle.net/ys3jvkLh/1/

我以city屬性爲例，但實際上你可以在你的響應對象上使用任何屬性。