JQuery AutoComplete 对多列查询(原创)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js" ></script>
<script>
    $(function() {
        var test = [
            {jm:'zx', label:'张旭'},
            {jm:'lb', label:'李白'},
            {jm:'zwj', label:'张无忌'},
            {jm:'lsy', label:'李商隐'},
			{jm:'hys', label:'黄药师'},
			{jm:'zsf', label:'张三丰'},
			{jm:'wyx', label:'韦一笑'},
			{jm:'zbt', label:'周伯通'},
			{jm:'hqg', label:'洪七公'},
			{jm:'wcy', label:'王重阳'},
			{jm:'qcj', label:'邱处机'},
			{jm:'zm', label:'赵敏'},
			{jm:'zzr', label:'周芷若'},
			{jm:'hyd', label:'胡一刀'},
			{jm:'cls', label:'程灵素'},
			{jm:'hqn', label:'胡青牛'},
			{jm:'zcs', label:'张翠山'},
			{jm:'yss', label:'殷素素'},
			{jm:'ycz', label:'袁承志'},
			{jm:'hts', label:'何惕守'},
			{jm:'hzd', label:'何足道'},
			{jm:'yg', label:'杨过'},
			{jm:'xln', label:'小龙女'},
			{jm:'mnc', label:'穆念慈'},
			{jm:'yk', label:'杨康'},
			{jm:'ytx', label:'杨铁心'},
        ]
        $( "#tags" ).autocomplete({
            source:function(request, suggest){
                input = request.term.toLowerCase();
                var suggestions = [];
                for (i=0;i<test.length;i++) {
                    str = test[i].jm + test[i].label;
                    if (str.toLowerCase().indexOf(input) >= 0) 
                        suggestions.push(test[i].label);
                }
                suggest(suggestions);
            }
        });
    });
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

posted @ 2022-12-02 17:24  汉学  阅读(45)  评论(0)    收藏  举报