¿Cómo utilizar un cuadro combinado autocompletado jQuery con datos AJAX JSON?

Necesito hacer lo siguiente usando un combobox.

Select box tiene una lista predeterminada de ciudades desde las que el usuario puede buscar.Si un usuario escribe texto en elinput cuadro, necesito hacer una llamada ajax para obtener datos y mostrar las opciones al usuario.Si se obtuvieron datos para la solicitud del usuario, esas ciudades deberían agregarse a las opciones deSelect box

UtilizandojQuery autocompletar Puedo obtener datos json cuando el usuario ingresa una cadena y muestra los resultados. Sin embargo, no tengo ni idea de cómo integrar esto usando combobox.

Caja combo usa una matriz de datos estáticos para buscar y si entiendo esto correctamente, usa expresiones regulares para hacer coincidir los valores. Sin embargo, ¿cómo lo interrumpo y uso la llamada ajax para obtener datos del servidor y actualizar los resultados?

Autocompletar para el cuadro de texto de entrada:

$( "#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

    });
    });

Respuestas a la pregunta(2)

Su respuesta a la pregunta