jQuery文本补全框

做一个从远程获取数据的文本补全框（类似百度、谷歌搜索框）

使用框架：jQuery-ui

2017-03-24

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 自动完成（Autocomplete</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
 　　<script type="text/javascript">
　　 $(".m-text").keyup(tz_key);//监听文本框按键事件
　 　function tz_key(){
    var value=$(this).val();
　　//为空时不调用ajax
    if(value == " "||value.length == 0||value==null){
        return;
    }else{                
        $.post("GetChartData", { name: value },function(data){    
            var dat=eval(data);
            var availableTags = dat;//将获取数据填入备选框
            $( ".m-text" ).autocomplete({
               source: availableTags
            });
            },"text"); //这里格式要注意，json、xml什么都可以，我直接返回文本
　　<div class="m-top">
        <form class="m-form">
        <label>标签:</label>
        <input type="text" name="name" id="name"  class="m-text">
        <input type="button" onclick="dos()" value="确定" class="m-btn">
        </form>
    </div>
</body>
</html>

 

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 自动完成（Autocomplete</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
 　　<script type="text/javascript">
　　 $(".m-text").keyup(tz_key);//监听文本框按键事件
　 　function tz_key(){
    var value=$(this).val();
　　//为空时不调用ajax
    if(value == " "||value.length == 0||value==null){
        return;
    }else{                
        $.post("GetChartData", { name: value },function(data){    
            var dat=eval(data);
            var availableTags = dat;//将获取数据填入备选框
            $( ".m-text" ).autocomplete({
               source: availableTags
            });
            },"text"); //这里格式要注意，json、xml什么都可以，我直接返回文本
　　<div class="m-top">
        <form class="m-form">
        <label>标签:</label>
        <input type="text" name="name" id="name"  class="m-text">
        <input type="button" onclick="dos()" value="确定" class="m-btn">
        </form>
    </div>
</body>
</html>

这里特别注意的是GetChartData是我servlet拦截的地址，里面返回的参数必须是数组

所以在Servlet中可以通过拼接字符串，类似：["标签1","标签2","标签三"]

需要引入的js文件以及css文件链接：https://files.cnblogs.com/files/ysj4428/jquery-ui-1.10.4%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8.zip

posted @ 2017-03-24 15:58  巫师大人  阅读(171)  评论(0)  编辑  收藏  举报