jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
78 lines (71 loc) • 3.75 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Input AutoComplite</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of autocompleting Custom Element Input." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
JQXElements.settings['inputSettings'] =
{
placeHolder: 'Enter a City',
source: (query, response) => {
var dataAdapter = new jqx.dataAdapter
(
{
datatype: 'jsonp',
datafields:
[
{ name: 'countryName' }, { name: 'name' },
{ name: 'population', type: 'float' },
{ name: 'continentCode' },
{ name: 'adminName1' }
],
url: 'http://api.geonames.org/searchJSON',
data:
{
featureClass: 'P',
style: 'full',
maxRows: 12,
username: 'jqwidgets'
}
},
{
autoBind: true,
formatData: (data) => {
data.name_startsWith = query;
return data;
},
loadComplete: (data) => {
if (data.geonames.length > 0) {
response($.map(data.geonames, (item) => {
return {
label: item.name + (item.adminName1 ? ', ' + item.adminName1 : '') + ', ' + item.countryName,
value: item.name
}
}));
}
}
}
);
}
};
</script>
</head>
<body>
<div class="example-description">
The Custom element Input widget provides suggestions while you type into the field. The suggestions in this sample are cities. The datasource is the geonames.org webservice. The city name ends up in the input after selecting an element, more info is displayed in the suggestions popup to help find the right entry..
</div>
Type: "be"<br />
<jqx-input settings="inputSettings" type="text"></jqx-input>
</body>
</html>