使用jQuery自動完成插件時如何傳遞國家代碼

Question

當用戶鍵入任何字符時，我正在使用jQuery自動完成功能來顯示國家/地區名稱。 當用戶單擊按鈕時，我想知道如何將國家/地區代碼而不是國家/地區名稱發送到服務器端操作。

這只是jQuery自動完成的一個示例。

<input type="text" class="form-control" id="plugins" name="plugins" />

var myData =[
    {"name": "Afghanistan", "code": "AF"},
    {"name": "Aland Islands", "code": "AL"},
    {"name": "Bahamas", "code": "BM"},
    {"name": "Bahrain", "code": "BH"},
    {"name": "Cambodia", "code": "CM"},
    {"name": "Cameroon", "code": "CN"},
    {"name": "Zambia", "code": "ZA"},
    {"name": "Zimbabwe", "code": "ZB"}
];

$(function() {
  $("#plugins").autocomplete({
    source: function(req, resp) {
      var results = [];
      $.each(myData, function(k, v) {
        // Make a pass for names
        if (v.name.toLowerCase().indexOf(req.term.toLowerCase()) == 0) {
          results.push(v.name)
          return;
        }
      });
      resp(results);
    },
        select: function( event , ui ) {
            alert( "You selected: " + ui.item.label+' values '+ ui.item.value );
            return false
        }    
  });
});

我知道json中沒有國家/地區代碼。 我稍后會在json中寫國家代碼。 請告訴我發送國家代碼以采取行動的方式。

現在問題已解決。 jsfiddle的工作版本是https://jsfiddle.net/urtkxo46/8/

Answer 1

嘗試這樣的事情：

 $( function() { var projects = [ { value: "1", label: "jQuery" }, { value: "2", label: "jQuery UI" }, { value: "3", label: "Sizzle JS" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); return false; } }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<div>" + item.label + "</div>" ) .appendTo( ul ); }; } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="project-label">Select a project (type "j" for a start):</div> <input id="project"> <input type="text" id="project-id"> <!-- change it to hidden and get its value --> 

工作小提琴

Answer 2

jQuery自動完成功能可以使用帶有標簽值鍵的對象。 只需將名稱設置為標簽，將國家/地區代碼設置為值

 var myData =[ {"name": "Uganda", "code": "UG"}, {"name": "Kenya", "code": "KY"}, {"name": "Tanzania", "code": "TZ"}, ]; $(function() { $("#plugins").autocomplete({ source: function(req, resp) { var results = []; $.each(myData, function(k, v) { // Make a pass for names if (v.name.toLowerCase().indexOf(req.term.toLowerCase()) == 0) { results.push({"label": v.name, "value": v.code}) return; } }); resp(results); }, select: function( event, ui ) { alert(ui.item.label) //when selected the label shows in alert } }); }); 

 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <input type="text" class="form-control" id="plugins" name="plugins" />