2017-03-29 12 views
0

は[申し訳ありませんが、英語での私の悪いために]私が知りたいのですが名前を表示する方法とJQuery UIオートコンプリートでIDを取得するには?

、どのように私はjQueryのUIオートコンプリートを使用して、オブジェクトの配列からIDを得ることができます。
名前が表示されます。しかし、私は送信ボタンをクリックすると、私はIDを取得したい。

これはこれまで私が試みてきたことです。今私は入力の名前はどちらかの結果のdivに表示されません送信ボタンをクリックしたときに、参照として

var cities = [ 
 
    { 
 
    id: 1, 
 
    name: "New York" 
 
    }, 
 
    { 
 
    id: 2, 
 
    name: "London" 
 
    }, 
 
    { 
 
    id: 3, 
 
    name: "Jakarta" 
 
    }, 
 
    { 
 
    id: 4, 
 
    name: "Sidney" 
 
    }, 
 
    { 
 
    id: 5, 
 
    name: "New Delhi" 
 
    }, 
 
    { 
 
    id: 6, 
 
    name: "Tokyo" 
 
    }, 
 
    { 
 
    id: 7, 
 
    name: "Madrid" 
 
    } 
 
]; 
 

 
var city_name = []; 
 

 
for (var i = 0; i < cities.length; i++) { 
 
    city_name.push(cities[i].name); 
 
} 
 

 
$("#autocomplete").autocomplete({ 
 
    source: city_name 
 
}); 
 

 
var getResult = function() { 
 
    var x = document.getElementById("autocomplete").value; 
 
    document.getElementById("result").innerHTML = x; 
 
}
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>autocomplete demo</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    The result is 
 
    <div id="result"></div> 
 
    <hr> 
 
    <label for="autocomplete">Select your city address : </label> 
 
    <input id="autocomplete"> 
 
    <input type="button" onclick="getResult()" value="Submit"> 
 
</body> 
 
</html>

+0

作業コードフィドルを提供しますか? –

+0

上記のコードをJSFiddleまたはRun code snippetにコピーすることができます –

+0

私の答えを確認してください –

答えて

1

これを試してみてください:

のjQuery:

$(document).ready(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); 
    }; 
}); 

HTML:

<div id="project-label">Select a project (type "j" for a start):</div> 
<input id="project"> 
<input type="hidden" id="project-id"> 

これはあなたhidden要素でidを与えるだろう。

Working Fiddle

関連する問題