自動完成的jQuery使用JSON數據

Question

具有以下條件數據的JSON文件：

[ 
    { 
     color: "red", 
     value: "#f00" 
    }, 
    { 
     color: "green", 
     value: "#0f0" 
    }, 
    { 
     color: "blue", 
     value: "#00f" 
    }, 
    { 
     color: "cyan", 
     value: "#0ff" 
    } 
] 

使用jQuery的自動完成的方法，我希望它能夠顯示顏色作爲選項來選擇和插入值在輸入。

<input type="text" name="selector" id="selector" /> 

<input type="text" name="color" id="color" /> 
<input type="text" name="value" id="value" /> 

以上不需要介紹。用於搜索顏色的選擇器，input.color用顏色值和input.value用值值。

編輯： 我有這樣的JSON數據：

[{ 
    "label": "Sec\u00e7\u00e3o 1", 
    "value": "1" 
}, { 
    "label": "Sec\u00e7\u00e3o 2", 
    "value": "2" 
}, { 
    "label": "Sec\u00e7\u00e3o 3", 
    "value": "3" 
}, { 
    "label": "Sec\u00e7\u00e3o 4", 
    "value": "4" 
}] 

這個HTML：

<input type="text" id="name" /> 
<input type="text" id="value" /> 

與這個jQuery：

$(document).ready(function(){ 
    $("#name").autocomplete({ 
     source: "json.php", 
     select: function (event, ui) { 
      $("#name").val(ui.label); 
      $("#value").val(ui.value); 
     } 
    }); 
}); 

我跟着安德魯的答案，它提示我選擇數據，但是如果我提醒ui.label和ui.value變量，它表示'未定義'。我錯過了什麼？

EDIT2： 比方說，我有這樣的HTML：

<input type="text" class="name" /> 
<input type="text" class="value" /> 

<input type="text" class="name" /> 
<input type="text" class="value" /> 

是否可以處理多個選擇用同樣的方法.autocomplete()？喜歡，請使用input.name選擇我想要的標籤，並只更新其旁邊的input.value？

[input.name] [input.value]
^我選擇              ^更新
   標籤                     值旁邊
[input.name] [input.value]
^此保持不變^

Answer 1

使用遠程數據源：

$("#selector").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "my_server_side_resource.php", 
      type: "GET", 
      data: request, 
      success: function (data) { 
       response($.map(data, function (el) { 
        return { 
         label: el.color, 
         value: el.value 
        }; 
       })); 
      } 
     }); 
    }, 
    select: function (event, ui) { 
     // Prevent value from being put in the input: 
     this.value = ui.item.label; 
     // Set the next input's value to the "value" of the item. 
     $(this).next("input").val(ui.item.value); 
     event.preventDefault(); 
    } 
}); 

歡迎調整$.ajax呼叫需要。這個例子會生成如下所示的PHP資源請求：

my_server_side_resource.php？長期= XYZ

如果你在你的服務器端代碼控制，你可以更改所返回看起來像這樣的數據：

[ 
    { 
     label: "red", 
     value: "#f00" 
    }, /* etc */ 
] 

您可以簡單地用一個字符串的名稱，你的服務器端資源爲source：

$("#selector").autocomplete({ 
    source: "my_server_side_resource.php", 
    select: /* same as above */ 
}); 

退房的remote with JSONP example使用服務器端資源的完整示例。

編輯：使用本地數據的工作演示中看到這個例子：http://jsfiddle.net/SMxY6/

Answer 2

你需要改變你的JSON對象使用「標籤」屬性。從該文檔：

對象的帶標籤和值的屬性的數組： [{標號： 「選擇1」，值： 「VALUE1」}，...]

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

然後，當「更改」或「選擇」事件被觸發時，您需要設置其他文本字段的值。

Answer 3

經過數小時的工作..終於實現了。事情是我有一個由許多json對象組成的json數組。每個json對象都有銀行名稱和ifsc代碼。用戶需要鍵入銀行並從數據庫中過濾出銀行明細行。選擇該銀行後...我有2個輸入字段，一個用於銀行，另一個用於ifsc代碼。 我選擇銀行名稱並顯示相應的ifsc代碼。所以這是我做的： -

---

<script type="text/javascript"> 
$(function() { 





    $("#newBeneBankName").autocomplete({ 

     source: function(request, response) { 

      $.ajax({ 
       url: "getBankDetailsIFSCJson", 
       type: "GET", 
       data: { 
        term: request.term 
       }, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data, function (el) { 
         return { 
          label: el.label, 
          value: el.value 
         }; 
        })); 
       } 
      }); 
     }, //newBeneBankName addBeneIfscCode 
     focus: function (event, ui) { 
      event.preventDefault(); 
      $("#newBeneBankName").val(ui.item.label); 
     }, 
     select: function (event, ui) { 
      event.preventDefault(); 
      $("#addBeneIfscCode").val(ui.item.value); 
      $("#newBeneBankName").val(ui.item.label); 
     } 

}); 
}); 

---

我的JSON數組= {[ 標籤： 「印度國家銀行」， 值： 「SBIN00076」 } ， { 標籤： 「ICICI銀行」， 值： 「ICIC001」 } ... ]