A simple jquery ui autocomplete

by karthick6891

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="ui-widget">
<label for="address">Search: </label>
<input id="address">
</div>

CSS

input {
  width: 100%;
}

JavaScript

$(function() {
var availableAddress = [  
   {  
      "id":null,
      "houseNumber":null,
      "street":"2943 Iron Springs Pl",
      "value":"2943 Iron Springs Pl",
      "city":{  
         "id":null,
         "city":"Castle Rock",
         "countyId":null,
         "stateId":null,
         "properties":null
      },
      "state":{  
         "id":null,
         "stateCode":"CO",
         "stateName":null,
         "counties":null,
         "properties":null
      },
      "zipcode":{  
         "id":null,
         "zipcode":"80109",
         "properties":null,
         "county":null
      },
      "propertyPhotos":null,
      "pid":"pUuQ8Oce"
   },
   {  
      "id":null,
      "houseNumber":null,
      "street":"3943 Magowan Dr",
       "value":"3943 Magowan Dr",
      "city":{  
         "id":null,
         "city":"Santa Rosa",
         "countyId":null,
         "stateId":null,
         "properties":null
      },
      "state":{  
         "id":null,
         "stateCode":"CA",
         "stateName":null,
         "counties":null,
         "properties":null
      },
      "zipcode":{  
         "id":null,
         "zipcode":"95405",
         "properties":null,
         "county":null
      },
      "propertyPhotos":null,
      "pid":"ShDWSWcR"
   }
]
   $( "#address" ).autocomplete({
      minLength: 0,
         source: function(request, response) {
         console.log("source")
            response($.map(availableAddress, function(item) {
                return {
                    label: item.street + ' ' + item.city.city + ', ' + item.state.stateCode + ' ' + item.zipcode.zipcode,
                    value: item.street
                }
            }));
        }
    })
 
 
});