이름을 표시하고 JQuery UI Autocomplete에서 ID를 얻는 방법?

는 [죄송합니다, 영어에 내 나쁜에 대해] 내가 알고 싶습니다이름을 표시하고 JQuery UI Autocomplete에서 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>

은 지금 당신이 보는대로, 때 나는 버튼의 이름을 제출을 클릭합니다.

출처

2017-03-29 Ridoan Saleh Nasution

작동 코드 피들을 제공 하시겠습니까? –

위의 코드를 JSFiddle 또는 Run code snippet 대신 복사 할 수 있습니다 –

내 대답을 확인하십시오 –

이 시도 :

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

출처

2017-03-29 05:22:18

이름을 표시하고 JQuery UI Autocomplete에서 ID를 얻는 방법?

답변

관련 문제