The datasource is a simple JavaScript array, provided to the widget using the source-option.
Create database:
CREATE DATABASE IF NOT EXISTS `dbcountries` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `dbcountries`;
DROP TABLE IF EXISTS `zipcode`;
CREATE TABLE IF NOT EXISTS `zipcode` (
`zip_id` varchar(5) NOT NULL,
`zip_state` varchar(3) NOT NULL,
`zip_city` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `zipcode` (`zip_id`, `zip_state`, `zip_city`) VALUES
('10001', 'NY', 'New York'),
('90001', 'CA', 'Los Angeles'),
('60601', 'IL', 'Chicago'),
('77001', 'TX', 'Houston'),
('85001', 'AZ', 'Phoenix'),
('19019', 'PA', 'Philadelphia'),
('78201', 'TX', 'San Antonio'),
('75201', 'TX', 'Dallas'),
('92101', 'CA', 'San Diego'),
('95101', 'CA', 'San Jose'),
('48201', 'MI', 'Detroit'),
('94101', 'CA', 'San Francisco'),
('32099', 'FL', 'Jacksonville'),
('46201', 'IN', 'Indianapolis'),
('73301', 'TX', 'Austin'),
('43085', 'OH', 'Columbus'),
('76101', 'TX', 'Fort Worth'),
('28201', 'NC', 'Charlotte'),
('37501', 'TN', 'Memphis'),
('21201', 'MD', 'Baltimore');
Create the PHP for query data:
File name must: get_list.php
<?php
// Data could be pulled from a DB or other source
mysql_connect("localhost","imagegambar","blogger_top");
mysql_select_db("dbcountries");
$cities = array();
$sqlopt = "SELECT * FROM zipcode";
$QUERYopt = mysql_query($sqlopt);
while ($rows = mysql_fetch_array($QUERYopt)) {
$zip_id = $rows["zip_id"];
$zip_state= $rows["zip_state"];
$zip_city = $rows["zip_city"];
$cities2 = array(zip_city=>$zip_city, zip_state=>$zip_state, zip_id=>$zip_id);
array_push($cities,$cities2);
}
// Cleaning up the term
$term = trim(strip_tags($_GET['term']));
if (is_numeric($term)) {
// Rudimentary search by zip_id of city
$matches = array();
foreach($cities as $zip_id){
if(stripos($zip_id['zip_id'], $term) !== false){
// Add the necessary "value" and "label" fields and append to result set
$zip_id['value'] = $zip_id['zip_city'];
$zip_id['label'] = "{$zip_id['zip_id']}, {$zip_id['zip_state']} {$zip_city['zip_city']}";
$matches[] = $zip_id;
}
}
} else {
// Rudimentary search by name of city
$matches = array();
foreach($cities as $zip_city){
if(stripos($zip_city['zip_city'], $term) !== false){
// Add the necessary "value" and "label" fields and append to result set
$zip_city['value'] = $zip_city['zip_city'];
$zip_city['label'] = "{$zip_city['zip_city']}, {$zip_city['zip_state']} {$zip_city['zip_id']}";
$matches[] = $zip_city;
}
}
}
// Truncate, encode and return the results
$matches = array_slice($matches, 0, 5);
print json_encode($matches);
?>
Create the autocomplete widgets:
Call from your Chrome browser: autocomplete88.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<script type="text/javascript">
function kdzipcity() {
$(document).ready(function(){
var ac_config = {
source: "get_list.php",
select: function(event, ui) {
$("#zip_city").val(ui.item.zip_city);
$("#zip_state").val(ui.item.zip_state);
$("#zip_id").val(ui.item.zip_id);
},
minLength:1
};
$("#zip_city").autocomplete(ac_config);
});
}
</script>
<form action="#" method="post">
<div class="ui-widget">
<p><label for="zip_city" >City</label><br />
<input type="text" name="zip_city" id="zip_city" value="" onkeypress="kdzipcity()" /></p>
<p><label for="zip_state">State</label><br />
<input type="text" name="zip_state" id="zip_state" value="" /></p>
<p><label for="zip_id">Zip</label><br />
<input type="text" name="zip_id" id="zip_id" value="" /></p>
</div>
</form>
USE `dbcountries`;
DROP TABLE IF EXISTS `zipcode`;
CREATE TABLE IF NOT EXISTS `zipcode` (
`zip_id` varchar(5) NOT NULL,
`zip_state` varchar(3) NOT NULL,
`zip_city` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `zipcode` (`zip_id`, `zip_state`, `zip_city`) VALUES
('10001', 'NY', 'New York'),
('90001', 'CA', 'Los Angeles'),
('60601', 'IL', 'Chicago'),
('77001', 'TX', 'Houston'),
('85001', 'AZ', 'Phoenix'),
('19019', 'PA', 'Philadelphia'),
('78201', 'TX', 'San Antonio'),
('75201', 'TX', 'Dallas'),
('92101', 'CA', 'San Diego'),
('95101', 'CA', 'San Jose'),
('48201', 'MI', 'Detroit'),
('94101', 'CA', 'San Francisco'),
('32099', 'FL', 'Jacksonville'),
('46201', 'IN', 'Indianapolis'),
('73301', 'TX', 'Austin'),
('43085', 'OH', 'Columbus'),
('76101', 'TX', 'Fort Worth'),
('28201', 'NC', 'Charlotte'),
('37501', 'TN', 'Memphis'),
('21201', 'MD', 'Baltimore');
Create the PHP for query data:
File name must: get_list.php
<?php
// Data could be pulled from a DB or other source
mysql_connect("localhost","imagegambar","blogger_top");
mysql_select_db("dbcountries");
$cities = array();
$sqlopt = "SELECT * FROM zipcode";
$QUERYopt = mysql_query($sqlopt);
while ($rows = mysql_fetch_array($QUERYopt)) {
$zip_id = $rows["zip_id"];
$zip_state= $rows["zip_state"];
$zip_city = $rows["zip_city"];
$cities2 = array(zip_city=>$zip_city, zip_state=>$zip_state, zip_id=>$zip_id);
array_push($cities,$cities2);
}
// Cleaning up the term
$term = trim(strip_tags($_GET['term']));
if (is_numeric($term)) {
// Rudimentary search by zip_id of city
$matches = array();
foreach($cities as $zip_id){
if(stripos($zip_id['zip_id'], $term) !== false){
// Add the necessary "value" and "label" fields and append to result set
$zip_id['value'] = $zip_id['zip_city'];
$zip_id['label'] = "{$zip_id['zip_id']}, {$zip_id['zip_state']} {$zip_city['zip_city']}";
$matches[] = $zip_id;
}
}
} else {
// Rudimentary search by name of city
$matches = array();
foreach($cities as $zip_city){
if(stripos($zip_city['zip_city'], $term) !== false){
// Add the necessary "value" and "label" fields and append to result set
$zip_city['value'] = $zip_city['zip_city'];
$zip_city['label'] = "{$zip_city['zip_city']}, {$zip_city['zip_state']} {$zip_city['zip_id']}";
$matches[] = $zip_city;
}
}
}
// Truncate, encode and return the results
$matches = array_slice($matches, 0, 5);
print json_encode($matches);
?>
Create the autocomplete widgets:
Call from your Chrome browser: autocomplete88.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<script type="text/javascript">
function kdzipcity() {
$(document).ready(function(){
var ac_config = {
source: "get_list.php",
select: function(event, ui) {
$("#zip_city").val(ui.item.zip_city);
$("#zip_state").val(ui.item.zip_state);
$("#zip_id").val(ui.item.zip_id);
},
minLength:1
};
$("#zip_city").autocomplete(ac_config);
});
}
</script>
<form action="#" method="post">
<div class="ui-widget">
<p><label for="zip_city" >City</label><br />
<input type="text" name="zip_city" id="zip_city" value="" onkeypress="kdzipcity()" /></p>
<p><label for="zip_state">State</label><br />
<input type="text" name="zip_state" id="zip_state" value="" /></p>
<p><label for="zip_id">Zip</label><br />
<input type="text" name="zip_id" id="zip_id" value="" /></p>
</div>
</form>
Have a nice try!
