不用插件实现自动提示实现思路：
1：focus事件执行清空原来的提示
2：keyup事件判断非空时查询显示提示框
3：blur事件隐藏显示框
优点：不用学习其他插件，自己可以精确控制
js部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(function() {
            // 查询框获得焦点
            $("#queryWord").focus(function() {
                        $("#queryWord").val("");
                    });
            // 查询框有输入
            $("#queryWord").keyup(function() {
                        if($("#queryWord").val().length > 0){
                            getAnswer($("#queryWord").val());
                        }
                    });
            // 查询框失去焦点
            $("#queryWord").blur(function() {
                if ($("#queryWord").val().length == 0) {
                    $("#queryWord").val("输入节目名称或视频的网址(URL)");
                }
                $("#autocomplete").hide();
            });
        });
// 自动提示
function getAnswer(queryWord) {
    $.ajax({
                type : "POST",
                url : "getPromptAnswer.action",
                cache : false,
                data : "word=" + $("#queryWord").val() + "&t=" + Math.random(),
                dataType : "json",
                async : true,
                success : function(json) {
                    if ($.isEmptyObject(json)) {
                        $("#autocomplete").hide();
                    } else {
                        $("#autocomplete").empty();
                        $.each(json,function(i,n){
                            $("#autocomplete").append('<li><a href="#"><span class="title">'+json[i].keyword+'</span><span class="type">'+json[i].typeStr+'</span></a></li>');
                        });
                        $("#autocomplete").show();
                    }
                }
            });
}

html部分：

1
2
3
4
5
6
7
<div class="indexnav_so">
        <div class="indexnav_tool">
            <input type="text" class="" id="queryWord" value="输入节目名称或视频的网址(URL)" />
            <button onclick="query(jQuery('#queryWord').val())">查询</button></div>
        <!--When focused input add class="search" to change input color-->
        <ul id="autocomplete" class="autocomplete" style="display:none;"></ul>
</div>

后台Java部分：返回json格式即可

1
[{"keyword":"第二十二条婚规","name":"d","typeStr":"电视剧"},{"keyword":"大唐女巡按","name":"d","typeStr":"电视剧"},{"keyword":"独生子女的婆婆妈妈","name":"d","typeStr":"电视剧"},{"keyword":"第八号当铺","name":"d","typeStr":"电视剧"},{"keyword":"大太监","name":"d","typeStr":"电视剧"},{"keyword":"毒女","name":"d","typeStr":"电影"},{"keyword":"大男当婚","name":"d","typeStr":"电视剧"},{"keyword":"读心神探","name":"d","typeStr":"电视剧"},{"keyword":"敌后便衣队传奇","name":"d","typeStr":"电视剧"},{"keyword":"大宅门 第一部","name":"d","typeStr":"电视剧"}]