<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <input type="text"> </div> <br> <div> <input type="text"> </div> <script src="https://www.jb51.net/autoComplete.js"></script> <script> window.onload = function () { var option = { id: 'txtTest', //控件id data: [{ "id": "1", "name": "aaaaa" }, { "id": "2", "name": "bbbbb" }, { "id": "2", "name": "bbb吴bb" }, { "id": "2", "name": "bbbzbb" }], paraName: 'name', textFiled: 'name', //显示的文字的属性名 valueFiled: 'id', //获取value的属性名 select: function (val, text) { alert(val + '' + text); } //选择选项时触发的事件 }; var option1 = { id: 'txtTest1', //控件id url: 'data.json', //数据 paraName: 'name', textFiled: 'name', //显示的文字的属性名 valueFiled: 'id', //获取value的属性名 select: function (val, text) { alert(val + '' + text); } //选择选项时触发的事件 }; AutoComplete(option,option1); } </script> </body> </html>
data.json
[ { "id": "1", "name": "aaaaa" }, { "id": "2", "name": "bbbbb" }, { "id": "3", "name": "ccccc" } ]