HTML数据列表:有没有一种方法可以自动完成基于字符的顺序? [英] HTML datalist: Is there a way to autocomplete based character order?
本文介绍了HTML数据列表:有没有一种方法可以自动完成基于字符的顺序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果在框中输入"I"，则显示印度，美国，英国和以色列.原因:所有人中的某个地方都有"i".对我而言，这似乎很愚蠢.我的想法是，它只应显示印度和以色列.他们的第一个字母有"i".有没有技巧可以做到这一点?要获得建议的项目以记下字母的顺序?
If I enter "I" in the box, I get India, United States, United Kingdom and Israel. REASON: All have an "i" in them...somewhere. This seems silly, to me any way. My thinking is it should only display India and Israel. They have "i" in the first letter. Is there a trick to get this to happen? To get the suggested items to take note of the order of the letters?
<!DOCTYPE html>
<html>
<head>
</script>
</head>
<body>
<input type="text" list="countries" name="mycountry" />
<datalist id="countries">
<option value="India">India</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Israel">Israel</option>
</datalist>
</body>
</html>
推荐答案
根据我的理解，纯HTML无法做到这一点.但是，借助JavaScript可以实现它.
As per my understanding you can't do that with pure HTML. However with the help of JavaScript you can achieve it.
var initialArray = [];
initialArray = $('#countries option');
$("#countryInput").keyup(function() {
var inputVal = $('#countryInput').val();
var first = [];
first = $('#countries option');
if (inputVal != '' && inputVal != 'undefined') {
var options = '';
for (var i = 0; i < first.length; i++) {
if (first[i].value.toLowerCase().startsWith(inputVal.toLowerCase())) {
options += '<option value="' + first[i].value + '" />';
}
}
document.getElementById('countries').innerHTML = options;
} else {
var options = '';
for (var i = 0; i < initialArray.length; i++) {
options += '<option value="' + initialArray[i].value + '" />';
}
document.getElementById('countries').innerHTML = options;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="countries" name="mycountry" id="countryInput" />
<datalist id="countries">
<option value="India">India</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Israel">Israel</option>
</datalist>这篇关于HTML数据列表:有没有一种方法可以自动完成基于字符的顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
