2014-09-06 85 views
0

我使用DevBridge自動完成和JSON文件,可以很好地顯示所有數據,但我最終只需顯示一個數據。Jquery UI自動完成顯示輸入類型文本中的所有數據

例如:

在輸入

文本形式i型「LON」 --->數據顯示「隆多,英格蘭」 ----->我選擇「英國倫敦」 - --->但我只需要 「倫敦」輸入形式展現,沒有「英格蘭」

如何???

請幫我

這是我的腳本:

$(函數(){ '使用嚴格的';

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 
}); 

});

這是JSON

VAR國家= [ { 「城市」: 「倫敦」, 「代碼」: 「25gt」, 「國」: 「英格蘭」 }, { 「城市 「: 」馬德里「, 」代碼「: 」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

+0

你'countriesArray'定義設置返回'城市+ country'爲{}值。改變(如下面的答案)到只是'城市',你很好。 – DevlshOne 2014-09-07 00:50:08

回答

1

替換爲您countriesArray:

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