Jquery UI 자동 완성 입력 유형 텍스트에 모든 데이터 표시

Question

JSON 파일과 함께 DevBridge 자동 완성 기능을 사용하고 있으며 모든 데이터를 잘 보여 주지만 한 가지 데이터 만 표시해야합니다.

예 :

입력 텍스트의 형태는 내가 ", 영국 런던을"내가 을 선택> ----- ", 론도 잉글랜드" ---> 데이터 을 보여"경도"를 입력 - --->하지만 난 입력 양식에 표시하는 전용 "런던" 필요 "잉글랜드"

어떻게하지 ???

나에게

를이 내 스크립트입니다 도와주세요 :

이

$은 (함수() {;

var countriesArray = $.map(countries, function (item) { return { value: item.city +','+ item.country, data: item.city }; }); 

// Setup jQuery ajax mock: 
$.mockjax({ 
    url: '*', 
    responseTime: 2000, 
    response: function (settings) { 
     var query = settings.data.query, 
      queryLowerCase = query.toLowerCase(), 
      re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'), 
      suggestions = $.grep(countriesArray, function (country) { 
       // return country.value.toLowerCase().indexOf(queryLowerCase) === 0; 
       return re.test(country.value); 
      }), 
      response = { 
       query: query, 
       suggestions: suggestions 
      }; 

     this.responseText = JSON.stringify(response); 
    } 
}); 

// Initialize ajax autocomplete: 
$('#autocomplete-ajax').autocomplete({ 
    // serviceUrl: '/autosuggest/service/url', 
    lookup: countriesArray, 
    lookupFilter: function(suggestion, originalQuery, queryLowerCase) { 
     var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi'); 
     return re.test(suggestion.value); 
    }, 
    onSelect: function(suggestion) { 
     $('#autocomplete-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data); 
    }, 
    onHint: function (hint) { 
     $('#autocomplete-ajax-x').val(hint); 
    }, 
    onInvalidateSelection: function() { 
     $('#selction-ajax').html('You selected: none'); 
    } 
}); 

// Initialize autocomplete with local lookup: 
$('#autocomplete').devbridgeAutocomplete({ 
    lookup: countriesArray, 
    minChars: 0, 
    onSelect: function (suggestion) { 
     $('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data); 
    }, 
    showNoSuggestionNotice: true, 
    noSuggestionNotice: 'Sorry, no matching results', 
}); 

// Initialize autocomplete with custom appendTo: 
$('#autocomplete-custom-append').autocomplete({ 
    lookup: countriesArray, 
    appendTo: '#suggestions-container' 
}); 

// Initialize autocomplete with custom appendTo: 
$('#autocomplete-dynamic').autocomplete({ 
    lookup: countriesArray 
}); 

는 '엄격한 사용'}); , { "

이

은

VAR 국가 = [ {:"런던 ", "코드 ":"25gt " "국가 ","잉글랜드 " "도시 "} JSON입니다 도시 ":"마드리드 ", "코드 ":"2f85 " "국가 ":"스페인 " }, { "도시 ":"파리 ", "코드 ":"6fg5 " "국가 ":"프랑스 " } ]

이 HTML

<div style="position: relative; height: 80px;"> 
    <label id="selction-ajax"></label> 
     <input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/> 
     <input type="text" name="country" id="autocomplete-ajax-x" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/> 
    </div> 

입니다 도와주세요!

TNX

Answer 1

은 당신의 countriesArray 교체 :

var countriesArray = $.map(countries, function (item) { return { value: item.city , data: item.city }; });