方法一：用form 表单的datalist属性，此时会以首字母补充排序。实现效果参考：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist
<!DOCTYPE html> <html> <body> <form action="action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Internet2 Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form> <p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p> </body> </html>
HTML code
方法二：用easycomplete，下载地址http://easyautocomplete.com/。实现效果会匹配包含输入字母的所有选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Using jQuery with a CDN -->
<script src="./jquery-2.1.3.min.js"></script>
<!-- JS file -->
<script src="./jquery.easy-autocomplete.min.js"></script>
<!-- CSS file -->
<link rel="stylesheet" href="./easy-autocomplete.min.css">
<!-- Additional CSS Themes file - not required-->
<!--<link rel="stylesheet" href="./easy-autocomplete.themes.min.css">-->
<script>
$(document).ready(function () {
var options = {
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#basics").easyAutocomplete(options);
})
</script>
</head>
<body>
<input id="basics"/>
</body>
</html>
时间： 2024-10-10 16:18:50