input标签即时搜索的效果实现

先看代码晚上总结一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf_8" />
    <title>页面</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript"  src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" >
    $(function() {
//获取ajxa异步数据
               var cityData = [  "java", "javaScript" ];
var mdmcData=["aa", "bb", "cac","dd","e"];

//自动填充1
              $( "#inp1" ).autocomplete({
               source: cityData
             });
//自动填充2
            $("#inp2").autocomplete({
                source: mdmcData
            });
    });
</script>
</head>
<body>
<div class="ui-widget"> 
input框1：<input id="inp1" />
input框2：<input id="inp2" />
</div>
</body>
</html>
运行结果：
image.png