Мне нужно сделать следующее, используя выпадающий список.

Select box has a default list of cities which the user can search from. If a user types in text in the input box, I need to make an ajax call to fetch data and display the options to the user. If data was fetched for user's request, those cities should be appended to the options of Select box

С помощьюJQuery автозаполнение Я могу получить данные JSON о пользователе, вводящем строку и отображающем результаты. Тем не менее, я совершенно не знаю, как интегрировать это с помощью выпадающего списка.

Поле со списком использует статический массив данных для поиска и, если я правильно понимаю, использует регулярное выражение для сопоставления значений. Однако, как мне прервать его и использовать вызов ajax для получения данных с сервера и обновления результатов?

Автозаполнение для ввода текстового поля:

$( "#searchDestination" ).autocomplete({
        delay: 500,
        source: function( request, response ) {
            $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: request.term
                },
                type: "POST",
                success: function(data){
                    if(data.cities.length == 0)
                        return response(["No matching cities found for " + request.term]);
                    response( $.map(data.cities, function(item){
                        return{
                            label: item.name,
                            value: item.name
                        };
                    })
                    );
                }
            });
        },
        minLength: 2

    });
    });