如何從一個填補多個輸入字段A HREF

Question

更新

我需要能夠從我的實際XML文檔中引用的XML，我不希望它只是var'd到jQuery的...

我要如何發生以下行爲......

搜索標籤和值的標籤輸入的搜索，然而，只有忽略從每個結果，以使打字阿拉巴馬其各自的輸入字段顯示阿拉巴馬州 - AL但只給我阿拉巴馬州和AL值

也使用

$.ajax({ 
     type: "GET", 
     url: "states.xml", // change to full path of file on server 
     dataType: "xml", 
     success: parseXml, 
     complete: setupAC, 
     failure: function(data) { 
      alert("XML File could not be found"); 
      } 
    }); 

代替了var myXML

var myXml = '<?xml version="1.0" encoding="UTF-8"?><states><state label=Alabama value=AL country="US"><state label=Alaska value=AK country="US"></states>'; 
$(document).ready(function() { 
     var myArrLabel = []; 
     var myArrValue = []; 
     var myArrCountry = []; 

     function parseXml(xml){ 
      $(xml).find("state").each(function(){ 
       var a1=[], a2=[], a3=[]; 
       a1.push($(this).attr("label")); 
       a2.push($(this).attr("value")); 
       a3.push($(this).attr("country")); 
       $.each(a1, function(i, el){ 
        if($.inArray(el, myArrLabel) === -1) myArrLabel.push(el); 
       }); 
       $.each(a2, function(i, el){ 
        if($.inArray(el, myArrValue) === -1) myArrValue.push(el); 
       }); 
       $.each(a3, function(i, el){ 
        if($.inArray(el, myArrCountry) === -1) myArrCountry.push(el); 
       }); 
      }); 
     }; 
     parseXml(myXml); 

     function fillIfUnique(box1, box2, attr1, attr2) { 
      var value1 = box1.val(); 
      var valueItemsForLabel = $(myXml).find('state[' + attr1 + '="' + value1 + '"]'); 
      if (valueItemsForLabel.length) { 
       var value2 = valueItemsForLabel.eq(0).attr(attr2); 
       console.log('value2: ' + value2); 
       var totalSame = $(myXml).find('state[' + attr1 + '="' + value1 + '"][' + attr2 + '="' + value2 + '"]'); 
       if(valueItemsForLabel.length==totalSame.length) { 
        box2.val(value2); 
       } else { 
        box2.val(''); 
       }; 
      }; 
     }; 

     function setupAC() { 
      $("input#labelBox").autocomplete({ 
       source: myArrLabel, 
       minLength: 1, 
       select: function(event, ui) { 
        $("input#labelBox").val(ui.item.value); 
        fillIfUnique($('#labelBox'), $('#valueBox'), 'label', 'value'); 
        fillIfUnique($('#labelBox'), $('#countryBox'), 'label', 'country'); 
       } 
      }); 
      $("input#valueBox").autocomplete({ 
       source: myArrValue, 
       minLength: 1, 
       select: function(event, ui) { 
        $("input#valueBox").val(ui.item.value); 
        fillIfUnique($('#valueBox'), $('#labelBox'), 'value', 'label'); 
        fillIfUnique($('#valueBox'), $('#countryBox'), 'value', 'country'); 
       } 
      }); 
      $("input#countryBox").autocomplete({ 
       source: myArrCountry, 
       minLength: 1, 
       select: function(event, ui) { 
        $("input#countryBox").val(ui.item.value); 
        fillIfUnique($('#countryBox'), $('#labelBox'), 'country', 'label'); 
        fillIfUnique($('#countryBox'), $('#valueBox'), 'country', 'value'); 
       } 
      }); 
     }; 
     setupAC(); 
    }); 

    </script> 
<form name="search_form" id="searchForm" method="GET"> 
    <p><label for="labelBox">Label Search</label> 
     <input type="text" id="labelBox" name="labelBox" /></p> 
    <p><label for="valueBox">Value Search</label> <input type="text" id="valueBox" name="valueBox" /></p> 
    <p><label for="countryBox">Country Search</label> <input type="text" id="countryBox" name="countryBox" /></p> 

    <p><label></label> <button name="searchKeyword" id="searchKeyword">Submit</button></p> 
</form> 

Answer 1

我們必須遵循這樣的邏輯：自動完成選擇值後，我們要檢查其他兩個字段值是唯一他們的範圍。例如，選擇國家代碼CA（XML value屬性）具有獨特的label加州，以及獨特的country美國。如果這些值不唯一，那麼我們將刪除該輸入值。檢查功能名稱是fillIfUnique()，請看this Fiddle。

HTML使用：

<h3>jQuery Autocomplete using XML as Data Source Example</h3> 
<form name="search_form" id="searchForm" method="GET"> 
    <p><label for="labelBox">Label Search</label> 
     <input type="text" id="labelBox" name="labelBox" /></p> 
    <p><label for="valueBox">Value Search</label> <input type="text" id="valueBox" name="valueBox" /></p> 
    <p><label for="countryBox">Country Search</label> <input type="text" id="countryBox" name="countryBox" /></p> 

    <p><label></label> <button name="searchKeyword" id="searchKeyword">Submit</button></p> 
</form> 

腳本：

$(document).ready(function() { 
    var myArrLabel = []; 
    var myArrValue = []; 
    var myArrCountry = []; 

    function parseXml(xml){ 
     $(xml).find("state").each(function(){ 
      var a1=[], a2=[], a3=[]; 
      a1.push($(this).attr("label")); 
      a2.push($(this).attr("value")); 
      a3.push($(this).attr("country")); 
      $.each(a1, function(i, el){ 
       if($.inArray(el, myArrLabel) === -1) myArrLabel.push(el); 
      }); 
      $.each(a2, function(i, el){ 
       if($.inArray(el, myArrValue) === -1) myArrValue.push(el); 
      }); 
      $.each(a3, function(i, el){ 
       if($.inArray(el, myArrCountry) === -1) myArrCountry.push(el); 
      }); 
     }); 
    }; 
    parseXml(myXml); 

    function fillIfUnique(box1, box2, attr1, attr2) { 
     var value1 = box1.val(); 
     var valueItemsForLabel = $(myXml).find('state[' + attr1 + '="' + value1 + '"]'); 
     if (valueItemsForLabel.length) { 
      var value2 = valueItemsForLabel.eq(0).attr(attr2); 
      console.log('value2: ' + value2); 
      var totalSame = $(myXml).find('state[' + attr1 + '="' + value1 + '"][' + attr2 + '="' + value2 + '"]'); 
      if(valueItemsForLabel.length==totalSame.length) { 
       box2.val(value2); 
      } else { 
       box2.val(''); 
      }; 
     }; 
    }; 

    function setupAC() { 
     $("input#labelBox").autocomplete({ 
      source: myArrLabel, 
      minLength: 1, 
      select: function(event, ui) { 
       $("input#labelBox").val(ui.item.value); 
       fillIfUnique($('#labelBox'), $('#valueBox'), 'label', 'value'); 
       fillIfUnique($('#labelBox'), $('#countryBox'), 'label', 'country'); 
      } 
     }); 
     $("input#valueBox").autocomplete({ 
      source: myArrValue, 
      minLength: 1, 
      select: function(event, ui) { 
       $("input#valueBox").val(ui.item.value); 
       fillIfUnique($('#valueBox'), $('#labelBox'), 'value', 'label'); 
       fillIfUnique($('#valueBox'), $('#countryBox'), 'value', 'country'); 
      } 
     }); 
     $("input#countryBox").autocomplete({ 
      source: myArrCountry, 
      minLength: 1, 
      select: function(event, ui) { 
       $("input#countryBox").val(ui.item.value); 
       fillIfUnique($('#countryBox'), $('#labelBox'), 'country', 'label'); 
       fillIfUnique($('#countryBox'), $('#valueBox'), 'country', 'value'); 
      } 
     }); 
    }; 
    setupAC(); 
}); 

注：我不得不壓縮並插入XML腳本進入。我刪除了數組中的重複條目。