zoukankan      html  css  js  c++  java
  • 仿百度的输入提示功能

    /// <reference path="jquery-1.7.1.min.js" />

    //实现搜索输入框的输入提示js类

    function oSearchSuggest(searchFuc) {

    var input = $('#txtNaviSearchBox');

    var suggestWrap = $('#gov_search_suggest');

    var key = "";

    var init = function () {

    input.bind('keyup', sendKeyWord);

    input.bind('blur', function () { setTimeout(hideSuggest, 100); })

    }

    var hideSuggest = function () {

    suggestWrap.hide();

    }

    //发送请求,根据关键字到后台查询

    var sendKeyWord = function (event) {

    //键盘选择下拉项

    if (suggestWrap.css('display') == 'block' && event.keyCode == 38 || event.keyCode == 40) {

    var current = suggestWrap.find('li.bdsug-s');

    if (event.keyCode == 38) {

    if (current.length > 0) {

    var prevLi = current.removeClass('bdsug-s').prev();

    if (prevLi.length > 0) {

    prevLi.addClass('bdsug-s');

    input.val(prevLi.html());

    }

    } else {

    var last = suggestWrap.find('li:last');

    last.addClass('bdsug-s');

    input.val(last.html());

    }

    } else if (event.keyCode == 40) {

    if (current.length > 0) {

    var nextLi = current.removeClass('bdsug-s').next();

    if (nextLi.length > 0) {

    nextLi.addClass('bdsug-s');

    input.val(nextLi.html());

    }

    } else {

    var first = suggestWrap.find('li:first');

    first.addClass('bdsug-s');

    input.val(first.html());

    }

    }

    //输入字符

    } else {

    var valText = $.trim(input.val());

    if (valText == '' || valText == key) {

    return;

    }

    searchFuc(valText);

    key = valText;

    }

    }

    //请求返回后,执行数据展示

    this.dataDisplay = function (data) {

    if (data.length <= 0) {

    suggestWrap.hide();

    return;

    }

    //往搜索框下拉建议显示栏中添加条目并显示

    var li;

    var tmpFrag = document.createDocumentFragment();

    suggestWrap.find('ul').html('');

    for (var i = 0; i < data.length; i++) {

    li = document.createElement('LI');

    li.innerHTML = data[i];

    tmpFrag.appendChild(li);

    }

    suggestWrap.find('ul').append(tmpFrag);

    suggestWrap.show();

    //为下拉选项绑定鼠标事件

    suggestWrap.find('li').hover(function () {

    suggestWrap.find('li').removeClass('bdsug-s');

    $(this).addClass('bdsug-s');

    input.val(this.innerHTML);

    }, function () {

    $(this).removeClass('bdsug-s');

    })

    // .bind('hover', function () {

    // alert(3);

    // input.val(this.innerHTML);

    // suggestWrap.hide();

    // });

    }

    init();

    };

    //实例化输入提示的JS,参数为进行查询操作时要调用的函数名

    var searchSuggest = new oSearchSuggest(sendKeyWordToBack);

    //这是一个模似函数,实现向后台发送ajax查询请求,并返回一个查询结果数据,传递给前台的JS,再由前台JS来展示数据。本函数由程序员进行修改实现查询的请求

    //参数为一个字符串,是搜索输入框中当前的内容

    function sendKeyWordToBack(keyword) {

    /**/var obj = {

    "keyword": keyword

    };

    $.ajax({

    type: "POST",

    url: "/Navi/NaviPrompt.aspx?NaviKey=" + obj.keyword + "",

    // url: "Default4.aspx",

    async: false,

    // data: obj,

    dataType: "json",

    error: function (x, y, z) { alert(y) },

    success: function (data) {

    var aData = [];

    $(data).each(function () {

    aData.push(this.Title);

    })

    //将返回的数据传递给实现搜索输入框的输入提示js类

    searchSuggest.dataDisplay(aData);

    }

    });

    // //以下为根据输入返回搜索结果的模拟效果代码,实际数据由后台返回

    // var aData = [];

    // aData.push(keyword + '返回数据1');

    // aData.push(keyword + '返回数据2');

    // aData.push(keyword + '不是有的人天生吃素的');

    // aData.push(keyword + '不是有的人天生吃素的');

    // aData.push(keyword + '2012是真的');

    // aData.push(keyword + '2012是假的');

    // alert(9);

    // //将返回的数据传递给实现搜索输入框的输入提示js类

    // searchSuggest.dataDisplay(aData);

    }

    复制代码中转页面代码:protected void Page_Load(object sender, EventArgs e)

    {

    if (null != Request.QueryString["NaviKey"] && "" != Request.QueryString["NaviKey"])

    {

    Prompt(Request.QueryString["NaviKey"]);

    }

    }

    /// <summary>

    /// 搜索提示

    /// </summary>

    protected void Prompt(string key)

    {

    NV_NaviContentBLL ncbll = new NV_NaviContentBLL();

    DataSet ds = ncbll.GetPrompt(string.Format("Title like '%{0}%' order by RewardAmount desc", key));

    if (ds.Tables[0].Rows.Count > 0)

    {

    Response.Write(ncbll.ToJson(ds.Tables[0]));

    Response.End();

    }

    }

  • 相关阅读:
    Backbone的 listenTo 和 on
    前端工作流程
    Zepto源码笔记(三)
    Zepto源码笔记(二)
    Zepto源码笔记(一)
    Canvas基础学习(一)——实现简单时钟显示
    常用排序算法之JavaScript实现
    NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
    浏览器基础知识
    学习Vim 全图解释
  • 原文地址:https://www.cnblogs.com/taofx/p/4139844.html
Copyright © 2011-2022 走看看