需要帮助，从此代码制作自动完成列表，jQuery Mobile
[英]Need help making an autocompleting list from this code, jQuery Mobile
问题描述
有人可以帮我获取此代码示例的自动完成列表吗？ 当您搜索时，我希望它像下面的说明一样显示...
如果我开始输入例如“ Calif”的文字，我希望它显示如下，并且如果我输入的字母可以在列表中突出显示，那将是不错的选择...
[ Los Angeles, California, United States ]
[ San Diego, California, United States ]
[ San Jose, California, United States ]
HTML和JavaScript：
<html lang="en">
<head>
<title>How could I get an autocompleting list instead?</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
/*Countries around the world*/
var countries = [
{ countryID: 1, name: 'United States' },
{ countryID: 2, name: 'United Kingdom' },
{ countryID: 3, name: 'Germany' },
{ countryID: 4, name: 'Finland' },
{ countryID: 5, name: 'Canada' }
]
/*regions in the countries*/
var regions = [
/*regions in United States*/
{ countryID: 1, regionID: 1, name: 'Alaska' },
{ countryID: 1, regionID: 2, name: 'Arizona' },
{ countryID: 1, regionID: 3, name: 'California' },
{ countryID: 1, regionID: 4, name: 'Florida' },
{ countryID: 1, regionID: 5, name: 'Georgia' },
/*regions in United Kingdom*/
{ countryID: 2, regionID: 6, name: 'England' },
{ countryID: 2, regionID: 7, name: 'Scotland' },
{ countryID: 2, regionID: 8, name: 'Wales' },
{ countryID: 2, regionID: 9, name: 'Northern Ireland' },
/*regions in Germany*/
{ countryID: 3, regionID: 10, name: 'Bavaria' },
{ countryID: 3, regionID: 11, name: 'Saxony' },
{ countryID: 3, regionID: 12, name: 'Thuringia' },
{ countryID: 3, regionID: 13, name: 'Saarland' },
/*regions in Finland*/
{ countryID: 4, regionID: 14, name: 'Lappi' },
{ countryID: 4, regionID: 15, name: 'Kainuu' },
{ countryID: 4, regionID: 16, name: 'Pohjois-Savo' },
/*regions in Canada*/
{ countryID: 5, regionID: 17, name: 'Yukon' },
{ countryID: 5, regionID: 18, name: 'Quebec' },
{ countryID: 5, regionID: 19, name: 'Alberta' },
{ countryID: 5, regionID: 20, name: 'Manitoba' }
]
/*Cities in the regions*/
var cities = [
{ regionID: 1, cityID: 1, name: 'Sitka', myValueOne: 19.18, myValueTwo: 12.10, myValueThree: 0.16, myValueFour: 0.89 },
{ regionID: 1, cityID: 2, name: 'Juneau', myValueOne: 19.18, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.84 },
{ regionID: 2, cityID: 3, name: 'Phoenix', myValueOne: 19.18, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.80 },
{ regionID: 2, cityID: 4, name: 'Scottsdale', myValueOne: 18.98, myValueTwo: 12.10, myValueThree: 0.165, myValueFour: 0.84 },
{ regionID: 2, cityID: 5, name: 'Yuma', myValueOne: 18.98, myValueTwo: 12.10, myValueThree: 0.215, myValueFour: 1.145 },
{ regionID: 3, cityID: 6, name: 'Los Angeles', myValueOne: 18.65, myValueTwo: 12.10, myValueThree: 0.10, myValueFour: 0.74 },
{ regionID: 3, cityID: 7, name: 'San Diego', myValueOne: 18.65, myValueTwo: 12.10, myValueThree: 0.25, myValueFour: 1.06 },
{ regionID: 3, cityID: 8, name: 'San Jose', myValueOne: 19.91, myValueTwo: 12.10, myValueThree: 0.14, myValueFour: 0.87 },
{ regionID: 4, cityID: 9, name: 'Denver', myValueOne: 19.91, myValueTwo: 12.10, myValueThree: 0.20, myValueFour: 1.17 },
{ regionID: 5, cityID: 10, name: 'Columbus', myValueOne: 19.91, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.78 },
{ regionID: 5, cityID: 11, name: 'Atlanta', myValueOne: 18.98, myValueTwo: 12.10, myValueThree: 0.15, myValueFour: 0.69 },
{ regionID: 6, cityID: 12, name: 'Bath', myValueOne: 19.23, myValueTwo: 12.10, myValueThree: 0.16, myValueFour: 0.94 },
{ regionID: 6, cityID: 13, name: 'Birmingham', myValueOne: 19.23, myValueTwo: 12.10, myValueThree: 0.16, myValueFour: 0.94 },
{ regionID: 6, cityID: 14, name: 'Bradford', myValueOne: 19.23, myValueTwo: 12.10, myValueThree: 0.16, myValueFour: 0.94 },
{ regionID: 7, cityID: 15, name: 'Aberdeen', myValueOne: 19.23, myValueTwo: 12.10, myValueThree: 0.14, myValueFour: 0.96 },
{ regionID: 8, cityID: 16, name: 'Cardiff', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 8, cityID: 17, name: 'Newport', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 9, cityID: 18, name: 'Belfast', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 10, cityID: 19, name: 'Bad Kissingen', myValueOne: 19.23, myValueTwo: 12.10, myValueThree: 0.14, myValueFour: 0.96 },
{ regionID: 11, cityID: 20, name: 'Bad Lausick', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 12, cityID: 21, name: 'Bad Langensaiza', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 13, cityID: 22, name: 'Blieskastel', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 13, cityID: 23, name: 'Dillingen', myValueOne: 19.23, myValueTwo: 12.10, myValueThree: 0.14, myValueFour: 0.96 },
{ regionID: 14, cityID: 24, name: 'Rovaniemi', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 15, cityID: 25, name: 'Kajaani', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 16, cityID: 26, name: 'Kuopio', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 17, cityID: 27, name: 'Whitehorse', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 18, cityID: 28, name: 'Quebec City', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 19, cityID: 29, name: 'Edmonton', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 },
{ regionID: 20, cityID: 30, name: 'Winnipeg', myValueOne: 19.85, myValueTwo: 12.10, myValueThree: 0.12, myValueFour: 0.72 }
]
// returns array of elements whose 'prop' property is 'value'
function filterByProperty(arr, prop, value) {
return $.grep(arr, function (item) { return item[prop] == value });
}
// populates select list from array of items given as objects: { name: 'text', value: 'value' }
function populateSelect(el, items) {
el.options.length = 0;
if (items.length > 0)
el.options[0] = new Option('Select one...', '');
$.each(items, function () {
el.options[el.options.length] = new Option(this.name, this.value);
});
}
// initialization
$(document).ready(function () {
// populating 1st select list
populateSelect($('#chooseCountry').get(0), $.map(countries, function (type) { return { name: type.name, value: type.countryID } }));
// populating 2nd select list
$('#chooseCountry').bind('change', function () {
var kommunerna = filterByProperty(regions, 'countryID', this.value);
populateSelect($('#chooseRegion').get(0), $.map(kommunerna, function (make) { return { name: make.name, value: make.regionID } }));
$('#chooseRegion').trigger('change');
});
// populating 3nd select list
$('#chooseRegion').bind('change', function () {
var forsamlingarna = filterByProperty(cities, 'regionID', this.value);
populateSelect($('#chooseCity').get(0), $.map(forsamlingarna, function (model) { return { name: model.name, value: model.cityID } }));
// check if you are a member of blablabla
if ($("#memberCheck").is(':checked'))
$('#chooseCity').bind('change', function () {
var valueForMe = filterByProperty(cities, 'cityID', this.value);
$.map(valueForMe, function (skatt) { $("#textForMyValue").html((skatt.myValueOne + skatt.myValueTwo + skatt.myValueThree + skatt.myValueFour).toFixed(3) + "%") });
});
else
$('#chooseCity').bind('change', function () {
var valueForMe = filterByProperty(cities, 'cityID', this.value);
$.map(valueForMe, function (skatt) { $("#textForMyValue").html((skatt.myValueOne + skatt.myValueTwo + skatt.myValueThree).toFixed(3) + "%") });
});
});
$('#memberCheck').click(function () {
$("#textForMyValue").empty();
$("select#chooseCity").val('').attr('selected', true);
if ($("#memberCheck").is(':checked'))
$('#chooseCity').bind('change', function () {
var valueForMe = filterByProperty(cities, 'cityID', this.value);
$.map(valueForMe, function (skatt) { $("#textForMyValue").html((skatt.myValueOne + skatt.myValueTwo + skatt.myValueThree + skatt.myValueFour).toFixed(3) + "%") });
});
else
$('#chooseCity').bind('change', function () {
var valueForMe = filterByProperty(cities, 'cityID', this.value);
$.map(valueForMe, function (skatt) { $("#textForMyValue").html((skatt.myValueOne + skatt.myValueTwo + skatt.myValueThree).toFixed(3) + "%") });
});
});
});
</script>
</head>
<body>
<form method="get">
<div id="selection">
<select id="chooseCountry" name="country_id"></select>
<select id="chooseRegion" name="region_id"></select>
<select id="chooseCity" name="city_id"></select>
</div>
<input type="checkbox" id="memberCheck" /> Are you a member of blablalbla?
<div id="textDiv">Your value is: <div id="textForMyValue"></div></div>
</form>
</body>
</html>
1 个解决方案
解决方案1
0 2014-07-07 07:51:46
您可以使用来自jquery-mobile的自动完成功能。 您可以通过它附加到自动完成为创建内容li elment然后针对列表刷新。 这是一个例子。
HTML：
JS：
var cities = [{
regionID: 1,
cityID: 1,
name: 'Sitka',
myValueOne: 19.18,
myValueTwo: 12.10,
myValueThree: 0.16,
myValueFour: 0.89
} ...];
var listView = $("[data-role='listview']");
$(cities).each(function () {
var test = "[" + this.regionID + " " + this.cityID + " " + this.name + "]";
listView.append('<li data-filtertext="' + test + '"><a href="#">' + test + '</a></li>');
});
listView.listview('refresh');
Fiddler示例： http : //jsfiddle.net/D64sh/
在data-filtertext是可以搜索的值，在a元素中是显示给suer的文本。
您可以将三个数据对象合并为一个。
需要帮助使我的代码高效
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.