jquery autocomplete event test

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/ui-lightness/jquery-ui.min.css">
<label for="city">City:</label>
<input type="text" id="city" name="city" />
<br/>
<select id="selCity" name="selCity" size="10">
    <option value="Tokyo">Tokyo</option>
    <option value="New York">New York</option>
    <option value="Hamburg">Hamburg</option>
    <option value="Los Angeles">Los Angeles</option>
    <option value="Seoul">Seoul</option>
    <option value="Jakarta">Jakarta</option>
    <option value="Bandung">Bandung</option>
    <option value="Surabaya">Surabaya</option>
    <option value="Vienna">Vienna</option>
    <option value="London">London</option>
    <option value="Sydney">Sydney</option>
    <option value="Canberra">Canberra</option>
    <option value="Miami">Miami</option>
</select>

JavaScript

(function(global) {
    'use strict';

    $(function() {
        var cities = [
                'Tokyo',
                'New York',
                'Hamburg',
                'Los Angeles',
                'Seoul',
                'Jakarta',
                'Bandung',
                'Surabaya',
                'Vienna',
                'London',
                'Sydney',
                'Perth',
                'Canberra',
                'Miami'
            ];
        
        $('#city').autocomplete({
            source: cities,
            change: function(event, ui) {
                console.log('change invoked', ui.item.value);
                //alert('Final choice: ' + ui.item.value);
                //Do whatever you want here like submit the form..
                
                //set the listbox city to selected value
                $("#selCity").val(ui.item.value);
            },
            close: function(event, ui) {
                console.log('close invoked', ui);
                var value = $(this).val();
                console.log(value);
                //alert('You selected: ' + value);
                //Do whatever you want here like submit the form..
                
                //set the listbox city to selected value
                $("#selCity").val(value);
            }
        });
    });
    
})(this);