goog.ui.ac.AutoComplete with objects with objects

Question

autocomplete을 데이터베이스의 데이터로 구현하려고합니다. 이 문자열의 무리에서 문자열을 선택보다 더 일반적인 것에도 불구하고 이러한 데이터를 사용하여 더 example 없습니다

[ 
    {"id":"1",name:"Jon"}, 
    {"id":"2",name:"Carl"}, 
    {"id":"3",name:"Jon"}, 
] 

처럼

데이터 보인다. 사용자가 "Jon"을 선택하면 ID를 알지 못하면 아무런 의미가 없습니다.

다음 페이지에 코드를 추가하고 사용자가 항목을 선택했지만 처음에는 코드 및 API에 문서화되어 있지 않은 이벤트를 수신하려고했지만 두 번째 이벤트가없는 것으로 나타났습니다. 방아쇠를 당겼다. 다행히도 이벤트 객체는 사용자가 선택한 객체 (문자열이 아님) 또는 선택한 항목의 인덱스를 전달하므로 private 변수에 액세스 할 필요없이 선택한 객체를 가져올 수 있습니다.

ac1.dispose(); 
var DataItem = function(id,value){ 
    this.id=id; 
    this.value=value; 
}; 
DataItem.prototype.toString=function(){ 
    return this.value; 
}; 
DataItem.prototype.valueOf=function(){ 
    return this.value; 
}; 
var tcMovies = [ 
    new DataItem(1,"one"), 
    new DataItem(2,"onetwo") 
]; 
var ac1 = goog.ui.ac.createSimpleAutoComplete(
    tcMovies, document.getElementById('txtInput1'), false); 


goog.events.listen(ac1,goog.ui.ac.AutoComplete.EventType.SELECT, 
    function(e){ 
    //never gets called 
    console.log(e); 
    //hoping to get an index so I can do something like 
    // ac1.getMatcher().rows_[selectedindex].id 
    // probably should not use rows_ but there is no get 
    // method for that either 
    } 
); 

Answer 1

조금 뒤범벅을하고 소스 코드를 살펴보면 잘 구현 된 방법을 찾을 수있었습니다.

/** 
    * Field value was updated. A row field is included and is non-null when a 
    * row has been selected. The value of the row typically includes fields: 
    * contactData and formattedValue as well as a toString function (though none 
    * of these fields are guaranteed to exist). The row field may be used to 
    * return custom-type row data. 
    */ 
    UPDATE: 'update', 

열고 following 페이지 F12 키를 눌러 콘솔에서 다음 코드를 실행을 제안 autocomplete.js에 대한 다음 설명은 올바른 방법입니다.

//remove existing autocomplete 
ac1.dispose(); 
//define data, need toString 
// to display the values 
var DataItem = function(id,value){ 
    this.id=id; 
    this.value=value; 
}; 
DataItem.prototype.toString=function(){ 
    return this.value; 
}; 
// create data 
var tcMovies = [ 
    new DataItem(1,"abbbbbbbb"), 
    new DataItem(2,"aabbbbbbb"), 
    new DataItem(3,"aaabbbbbb"), 
    new DataItem(4,"aaaabbbbb"), 
    new DataItem(5,"aaaaabbbb"), 
    new DataItem(6,"aaaaaabbb"), 
]; 
// use easy method to create and attach the autocomplete 
var ac1 = goog.ui.ac.createSimpleAutoComplete(
    tcMovies, document.getElementById('txtInput1'), false); 

//listen to UPDATE 
goog.events.listen(ac1,goog.ui.ac.AutoComplete.EventType.UPDATE, 
    function(e){ 
    //e.row should be the selected value 
    console.log("user selected",e.row); 
    } 
);