I have created a combobox search that lookup postcodes (zipcodes). But I do not want the the combobox text changed when the user selects an address.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Address Finder</title>
<link href="js/easyUI/themes/metro/easyui.css" rel="stylesheet" type="text/css">
<link href="js/easyUI/themes/icon.css" rel="stylesheet" type="text/css">
<script src="js/easyUI/jquery.min.js" type="text/javascript"></script>
<script src="js/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
<p>(Free test code: WR5 3DA)</p>
<input id="searchBox" class="easyui-combobox" style="width: 14%;" data-options="
mode: 'remote',
valueField: 'id',
textField: 'name',
required: true,
label: 'Enter Address:',
labelPosition: 'top',
hasDownArrow: false,
iconCls: 'icon-search',
onSelect: findAddress,
loader: loadAddresses
">
</div>
<script>
var key = 'myKey';
var isMiddleware = false;
var origin = '';
var countries = 'GBR';
var limit = '10';
var language = 'en-gb';
var field1Format = '';
function loadAddresses(param, success, error) {
if (param === undefined) {
return;
}
else {
var q = param.q || '';
}
q = $.trim(q);
if (q === '') {
return;
}
$('.textbox-icon').last().removeClass('icon-search');
$('.textbox-icon').last().addClass('icon-loading');
$.ajax({
url: 'https://services.postcodeanywhere.co.uk/Capture/Interactive/Find/v1.10/json3.ws',
method: 'POST',
data: {
Key: key,
Text: q,
IsMiddleware: isMiddleware,
Origin: origin,
Countries: countries,
Limit: limit,
Language: language
},
success: function(data) {
var items = $.map(data.Items, function(item) {
return {
id: item.Id,
name: item.Text + ' ' + item.Description,
description: item.Description,
text: item.Text,
type: item.Type
};
});
$('.textbox-icon').last().removeClass('icon-loading');
$('.textbox-icon').last().addClass('icon-search');
success(items);
},
error: function () {
error.apply(this, arguments);
}
});
}
function findAddress(record) {
if (!record) {
return;
}
$('.textbox-icon').last().removeClass('icon-search');
$('.textbox-icon').last().addClass('icon-loading');
var url = '';
var params = '';
var address = $(this).combobox('getText');
params += 'Key=' + encodeURIComponent(key);
if (record.type === 'Address') {
url = 'https://services.postcodeanywhere.co.uk/Capture/Interactive/Retrieve/v1.00/json3.ws';
params += '&Id=' + encodeURIComponent(record.id);
params += '&Field1Format=' + encodeURIComponent(field1Format);
}
else {
url = 'https://services.postcodeanywhere.co.uk/Capture/Interactive/Find/v1.10/json3.ws';
params += '&Text=' + encodeURIComponent(address);
params += '&IsMiddleware=' + encodeURIComponent(isMiddleware);
params += '&Container=' + encodeURIComponent(record.id !== undefined ? record.id : '');
params += '&Origin=' + encodeURIComponent(origin);
params += '&Countries=' + encodeURIComponent(countries);
params += '&Limit=' + encodeURIComponent(limit);
params += '&Language=' + encodeURIComponent(language);
}
$.ajax({
type: 'POST',
url: url,
data: params,
success: function(data) {
if (record.type === 'Address') {
$('#searchBox').combobox('setValue', data.Items[0].PostalCode);
}
else {
var items = $.map(data.Items, function(item) {
return {
id: item.Id,
name: item.Text + ' ' + item.Description,
description: item.Description,
text: item.Text,
type: item.Type
};
});
$('#searchBox').combobox('loadData', items);
// Replace the selected value with the user's input
$('#searchBox').combobox('setValue', address);
$('.textbox-icon').last().removeClass('icon-loading');
$('.textbox-icon').last().addClass('icon-search');
$('.combo-panel').panel('open');
}
},
error: function () {
error.apply(this, arguments);
}
});
}
</script>
</body>
</html>
