jqueryui-example-autocomplete实现自动填充效果
2015-12-01 19:02
921 查看
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 包含重音</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form>
<label for="developer">开发人员:</label>
<input id="developer">
</form>
</div>
</body>
</html>
在线测试地址: http://www.runoob.com/try/tryit.php?filename=jqueryui-example-autocomplete-folding
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成(Autocomplete) - 包含重音</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form>
<label for="developer">开发人员:</label>
<input id="developer">
</form>
</div>
</body>
</html>
在线测试地址: http://www.runoob.com/try/tryit.php?filename=jqueryui-example-autocomplete-folding
相关文章推荐
- asp 多字段模糊搜索的函数
- 正则表达式 模糊搜索
- asp.net模糊搜索
- php搜索
- iOS程序员利用分页和模糊查询技术实现一个App接口
- js模糊搜索关键字高亮显示,将字体变成红色
- Android 侧栏A-Z的快速滑动搜索(三)
- Span使用之利用系统Span样式实现模糊搜索,匹配变色的特殊UI效果
- 109.NSPredicate-谓词使用总结
- ListView动态模糊搜索显示ArrayList数据
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
- 下拉框中使用json格式数据并且支持模糊搜索
- bootstrap datatable显示数据表格及因分页获取数据造成的搜索问题
- 关于SQL查询语句的模糊查询,排序用法,limit用法的介绍
- zTree模糊搜索
- jdbc在模糊搜索时候报错:Parameter index out of range
- 使用combobox做模糊查询、匹配时,改从开始位置匹配为从任意位置匹配
- chosen.jquery.js 搜索框实现模糊搜索 chosen-select
- Elasticsearch 中文分词 & 安全配置
- 【微信小程序】下拉框搜索模糊(无数据库操作,json存入js文件,小程序引入并存本地缓存)