使用JQuery自動完成使用數組和下拉列表

我想創建一個腳本，它將使用JQuery的自動完成文本框來顯示已按狀態過濾的數組中的縣數據。狀態是一個下拉列表。例如：如果用戶選擇「伊利諾伊州」作爲國家，根據他們在文本框中輸入的乞求字母，autocompklete會給他們最近的縣名。我成功地能夠按狀態過濾數組，然後使用正確的數據加載數組，但我在嘗試將數組加載到自動完成時遇到問題。這是代碼段。感謝很多的幫助：使用JQuery自動完成使用數組和下拉列表

<body > 
    <script type="text/javascript"> 


    function findCounties(State) 
     { 
var County = new Object(); 

var xmlhttp; 
if (window.XMLHttpRequest) 
{ 
    // code for IE7+, Firefox, Chrome, Opera, Safari 

    xmlhttp = new XMLHttpRequest(); 
} 
else 
{ 
    // code for IE6, IE5 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 

if (xmlhttp != null) 
{ 
    xmlhttp.open("GET","US_Counties.csv",false); // the false makes this synchronous! 
    xmlhttp.send(); 
    var text = xmlhttp.responseText; 

    // text contains the ENTIRE CONTENTS of the text file 
    // you *could* just write those contents directly to the HTML output: 


    // but you might want to process that one line at a time. if so: 
    var lines = text.split("\n"); 

    var cntCounty = 0; 
     for (var n=0; n<lines.length; n++) 
     { 
      if(lines[n].indexOf(State) > 0){ 
       var line = lines[n]; 
       var populate = line.split(','); 


       County[cntCounty] = populate[1]; 
       cntCounty++; 

      }//IF 
     }//for 
    $(function() { 
      var Counties = [{ 
     a_state: [] 
     }; 
     for(var i in County) { 

     var item = County[i]; 

      Counties.a_state.push({ 
      "label" : item.County 
     "value" : item.County`enter code here` 
     }); 
    ]; 

    j$("#counties").autocomplete({ 
    source: Counties 
    }).data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li>").data("item.autocomplete", item).append("<a>" + item.label ++ "</a>").appendTo (ul); 
});

來源

2012-04-17 tonante27

我用這個JavaScript代碼：

var stateList, countyList; 

$(document).ready(function() { 
    $.ajax({type: "GET", 
      url: "US_counties.csv", // list of counties 
      cache: false, 
      error: function (xhr, textStatus, errorThrown) { 
       window.alert(textStatus); 
      }, 
      success: function (text, textStatus, xhr) { 
       var s1 = $('#s1')[0]; // the select box 
       stateList = []; 
       // each line has one county on it 
       $.each(text.split("\n"), function (ix, elt) { 
        var items = elt.split(','), 
         stateName = items[0], 
         countyName = items[3], a; 
        if (typeof stateList[stateName] == 'undefined') { 
         a = []; 
         a.push(countyName); 
         stateList[stateName] = a; 
         // add state to the select box 
         s1.options[s1.options.length] = new Option(stateName, stateName); 
        } 
        else { 
         stateList[stateName].push(countyName); 
        } 
       }); 

       // set the change event handler for the dropdown 
       $('#s1').bind('change', function() { 
        countyList = stateList[this.value]; 
        $("#t1") // the text box 
         .autocomplete({ source: countyList }) 
         .val(''); 
       }); 

       // trigger a 'fake' change, to set up the autocomplete 
       $('#s1').trigger('change'); 
      }}); 
});

說明：stateList是列表的列表。該列表的內部索引是州名，或者在我的情況下是州縮寫（AL，AK，AZ等）。 stateList中的每個項目都是一個字符串列表，每個項目都是該州所在縣的名稱。

的代碼做什麼：

註冊了文檔準備事件的功能。
在該函數中，通過ajax獲取縣列表的CSV。
在該ajax調用的成功回調中，解析結果。對於每個新狀態，請將項目添加到stateList，並將該狀態添加到下拉菜單中。將該縣添加到該州的縣名單。還將更改事件處理程序綁定到下拉列表。
在更改處理程序中，將自動填充應用於「縣名」文本框。源代碼是在下拉列表中選中狀態的縣名列表。

編輯 - 僅供參考，我得到了縣名單由this list，而僅僅更換用逗號標籤。用逗號替換選項卡不是必需的，但它使我可以更輕鬆地在文本編輯器中瀏覽列表。如果您不用逗號替換選項卡，則需要修改elt.split()的呼叫以在選項卡字符上進行拆分。

來源

2012-04-17 05:00:59 Cheeso

非常感謝Cheeso我會驗證並嘗試這個。 – tonante27 2012-04-17 23:19:19

@Chesso：不幸的是我收到通知，我需要使用對SalesForce數據對象的查詢遠程訪問列表 – tonante27 2012-05-18 14:45:10

使用JQuery自動完成使用數組和下拉列表

回答

相關問題