Jquery UI autocomplete show all data in input type text

Question

I'm using the DevBridge Autocomplete with JSON file, works well to and showing all data, but i needs finally to show only one data.

example:

in input text form i type "lon" ---> data show "londo,england" -----> i choose "london, england" ----> but i need only "london" to show in input form, without "england"

How???

please help me

This is my script:

$(function () { 'use strict';

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

});

this is json

var countries = [ { "city": "London", "code": "25gt", "country": "England" }, { "city": "Madrid", "code": "2f85", "country": "Spain" }, { "city": "Paris", "code": "6fg5", "country": "France" } ]

this is 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>

Please help !

TNX

Answer 1

Replace your countriesArray with :

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