zoukankan      html  css  js  c++  java
  • jquery实现搜索框类似提示功能(改进)

    用JQuery实现的类似GOOGLE\BAIDU搜索框的提示功能.

    程序在一个页面只能创建一个提示搜索框,因为对js也不熟,所以还不知道怎么解决...

    继续改进版,支持多个输入框!初步测试没发现问题,欢迎大家一起测试改进!!!

    autopoint.js代码:

    /*
    * @date: 2010-5-22 21:42:15
    * @author: 胡灵伟
    * Depends:
    * jquery.js
    *
    * function:类似GOOGLE搜索框提示功能
    * use:$("#input1, #input2").autopoint({url:"url", submit:["submit1", "submit2"]});
    * 对所有需要自动提示功能的输入框对象使用autopoint方法,
    * url为ajax提交的url,submit为输入框enter键提交的action
    */
    (
    function($) {
    $.fn.autopoint
    = function (options) {
    var bt = $.browser;
    //根据浏览器设定不同属性
    dialect = bt.msie?{
    topoffset:
    5,//提示框top属性与输入框偏移
    widthoffset:6//提示框width属性与输入框偏移
    }:bt.mozilla?{
    topoffset:
    5,
    widthoffset:
    2
    }:bt.safari
    ?{
    topoffset:
    6,
    widthoffset:
    2
    }:bt.opera
    ?{
    topoffset:
    5,
    widthoffset:
    2
    }:{
    topoffset:
    5,
    widthoffset:
    2
    };
    defaults
    = {
    url:options.url,
    keyUp :
    38,//向上方向键
    keyDown : 40,//向下方向键
    keyEnter : 13,//回车键
    listHoverCSS : 'jhover',//提示框列表鼠标悬浮的样式
    tpl : '<div class="list"><div class="word">{word}</div><div class="view">{view}</div></div>',
    submit:options.submit
    };
    var originalVal = new Array();
    var lastVal = new Array();
    var options = $.extend(defaults, $.extend(dialect, options));
    var dropDiv = $('<div></div>').addClass('dropDiv').appendTo('body');
    return this.each(function(i){
    var pa = $(this);
    $(
    this).bind('keydown', function(event){
    if (dropDiv.css('display') != 'none') {//当提示层显示时才对键盘事件处理
    var currentList = dropDiv.find('.' + options.listHoverCSS);
    if (event.keyCode == options.keyDown) {//如果按的是向下方向键
    if (currentList.length == 0) {
    originalVal[i]
    = $(this).val();
    //如果提示列表没有一个被选中,则将列表第一个选中
    $(this).val(getPointWord(dropDiv.find('.list:first')
    .mouseover()));
    }
    else if (currentList.next().length == 0) {
    //如果是最后一个被选中,则取消选中,即可认为是输入框被选中
    unHoverAll();
    $(
    this).val(originalVal[i]);
    }
    else {
    unHoverAll();
    //将原先选中列的下一列选中
    if (currentList.next().length != 0)
    $(
    this).val(getPointWord(currentList.next()
    .mouseover()));
    }
    return false;
    }
    else if (event.keyCode == options.keyUp) {//如果按的是向上方向键
    if (currentList.length == 0) {
    originalVal[i]
    = $(this).val();
    $(
    this).val(getPointWord(dropDiv.find('.list:last')
    .mouseover()));
    }
    else if (currentList.prev().length == 0) {
    unHoverAll();
    $(
    this).val(originalVal[i]);
    }
    else {
    unHoverAll();
    if (currentList.prev().length != 0)
    $(
    this).val(getPointWord(currentList.prev()
    .mouseover()));
    }
    return false;
    }
    else if(event.keyCode == options.keyEnter) {
    //console.debug(currentList.length);
    if(currentList.length == 0)
    if(options.submit[i]) {
    $(
    '#'+options.submit[i]).submit();
    }
    dropDiv.empty().hide();
    return;
    }
    }
    else if(event.keyCode == options.keyEnter)
    //console.debug(options.submit[i]);
    if(options.submit[i]) {
    $(
    '#'+options.submit[i]).submit();
    return;
    }
    }).bind(
    'keyup', function(event){
    //输入框值没有改变返回
    if ($(this).val() == lastVal[i])
    return;
    //当按键弹起记录输入框值,以方便查看键值有没有变
    lastVal[i] = $(this).val();
    //输入框值变为空返回
    if($(this).val() == ''){
    dropDiv.empty().hide();
    return;
    }
    //如果按下的向上或是向下键,说明在选择
    if(event.keyCode == options.keyUp||event.keyCode == options.keyDown) return;
    //输入框中值有变化,发送请求
    getData(pa, $(this).val());
    }).bind(
    'blur', function(){
    //输入框失去焦点隐藏提示框,mousedown比
    //blur优先触发所以先处理选择提示框的内容
    dropDiv.empty().hide();
    });

    /**处理ajax返回成功的方法**/
    handleResponse
    = function(parent, json) {
    var isEmpty = true;
    for(var o in json){
    if(o == 'data') isEmpty = false;
    }
    if(isEmpty) {
    //showError("返回数据格式错误,请检查请求URL是否正确!");
    dropDiv.empty().hide();
    return;
    }
    if(json['data'].length == 0) {
    //返回数据为空
    dropDiv.empty().hide();
    return;
    }
    refreshDropDiv(parent, json);
    dropDiv.show();
    };
    /**处理ajax失败的方法**/
    handleError
    = function(error) {
    dropDiv.empty().hide();
    showError(
    "请求失败!"+arguments[1]);
    };
    showError
    = function(error){
    //alert(error);
    };
    /**通过ajax返回json格式数据生成用来创建dom的字符串**/
    render
    = function(parent, json) {
    var res = json['data'] || json;
    var appendStr = '';
    //用json对象中内容替换模版字符串中匹配/\{([a-z]+)\}/ig的内容,如{word},{view}
    for ( var i = 0; i < res.length; i+=1) {
    appendStr
    += options.tpl.replace(/\{([a-z]+)\}/ig, function(m, n) {
    return res[i][n];
    });
    }
    jebind(parent, appendStr);
    };
    /**将新建dom对象插入到提示框中,并重新绑定mouseover事件监听**/
    jebind
    = function(parent, a) {
    dropDiv.append(a);
    dropDiv.find(
    '.list').each(function() {
    $(
    this).unbind('mouseover').mouseover(function() {
    unHoverAll();
    $(
    this).addClass(options.listHoverCSS);
    }).unbind(
    'mousedown').mousedown(function(){
    parent.val(getPointWord($(
    this)));
    dropDiv.empty().hide();
    parent.focus();
    });
    });
    };
    /**将提示框中所有列的hover样式去掉**/
    unHoverAll
    = function() {
    dropDiv.find(
    '.list').each(function() {
    $(
    this).removeClass(options.listHoverCSS);
    });
    };
    /**在提示框中取得当前选中的提示关键字**/
    getPointWord
    = function(p) {
    return p.find('div:first').text();
    };
    /**刷新提示框,并设定样式**/
    refreshDropDiv
    = function(parent, json) {
    var left = parent.offset().left;
    var height = parent.height();
    var top = parent.offset().top + options.topoffset + height;
    var width = options.width || (parent.width()+options.widthoffset) + 'px';
    dropDiv.empty();
    dropDiv.css( {
    //'border' : '1px solid #999',
    'left' : left,
    'top' : top,
    'width' : width
    });
    render(parent, json);
    //防止ajax返回之前输入框失去焦点导致提示框不消失
    parent.focus();
    };
    /**通过ajax向服务器请求数据**/
    getData
    = function(parent, word) {
    $.ajax( {
    type :
    'POST',
    data : {word:word,rand:Math.random()},
    url : options.url,
    dataType :
    'json',
    timeout :
    1000,
    success :
    function(json){handleResponse(parent, json);},
    error : handleError
    });
    };
    });
    };
    })(jQuery);

    使用方法:

    <style type="text/css">
    .dropDiv
    {
    position
    : absolute;
    z-index
    : 10;
    display
    : none;
    cursor
    : hand;
    border
    :1px solid #7F9DB9;
    }

    .dropDiv .jhover
    {
    background-color
    : #D5E2FF;
    }
    .dropDiv .list
    {
    float
    :left;
    width
    :100%;
    }
    .dropDiv .word
    {
    float
    :left;
    }

    .dropDiv .view
    {
    float
    :right;
    color
    : gray;
    text-align
    : right;
    font-size
    : 10pt;
    }
    </style>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/autopoint.js"></script>
    <script type="text/javascript">
    $(
    function(){
    $(
    "input").autopoint({url:'http://localhost/xun/ajax.svl?method=getsearchhelp',submit:["action1", "action2"]});
    });
    </script>
    </head>
    <body>
    <input type="text" id="search" name="search" size="50" autocomplete="off">
    <br />
    <br />
    <br />
    <br />
    <br />
    <input type="text" size="50" autocomplete="off" />
    </body>

    servlet主要部分:

    1 response.setContentType("text/html");
    2 response.setHeader("Cache-Control", "no-cache");
    3 response.setCharacterEncoding("UTF-8");
    4 String word = request.getParameter("word");
    5 if(Utils.isBlank(word)) return;
    6 JSONObject json = new JSONObject();
    7 JSONArray array = new JSONArray();
    8 Map<String, Object> map1 = new HashMap<String, Object>();
    9 map1.put("word", word + "a1");
    10 map1.put("view", 10);
    11 Map<String, Object> map2 = new HashMap<String, Object>();
    12 map2.put("word", word + "a2");
    13 map2.put("view", 15);
    14 Map<String, Object> map3 = new HashMap<String, Object>();
    15 map3.put("word", word + "a3");
    16 map3.put("view", 2);
    17 array.add(JSONObject.fromObject(map1));
    18 array.add(JSONObject.fromObject(map2));
    19 array.add(JSONObject.fromObject(map3));
    20 json.put("data", array);
    21 PrintWriter out = response.getWriter();
    22 out.print(json.toString());
    23 out.close();

    其中JSONObject和JSONArray类来自json-lib.jar,为了测试方便,是直接返回数据的,实际应用中可以替换为

    从数据源查取数据.

  • 相关阅读:
    poj 1328 Radar Installation (贪心)
    hdu 2037 今年暑假不AC (贪心)
    poj 2965 The Pilots Brothers' refrigerator (dfs)
    poj 1753 Flip Game (dfs)
    hdu 2838 Cow Sorting (树状数组)
    hdu 1058 Humble Numbers (DP)
    hdu 1069 Monkey and Banana (DP)
    hdu 1087 Super Jumping! Jumping! Jumping! (DP)
    必须知道的.NET FrameWork
    使用记事本+CSC编译程序
  • 原文地址:https://www.cnblogs.com/adaikiss/p/1742020.html
Copyright © 2011-2022 走看看