类似淘宝的搜索智能提示

本文主要是介绍类似淘宝的搜索智能提示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考：http://www.cnblogs.com/cscs/archive/2013/01/22/2870877.html

jQuery 插件搜索框智能提示调用简单!

直接贴代码。

(function($) {var timeid;var lastValue;var options;var c;var d;var t;$.fn.autoComplete = function(config) {c = $(this);var defaults = {width: c.width(), //提示框的宽度 默认跟文本框一样maxheight: 150, //提示框的最大高度top: 6,  //与文本框的上下距离url: "",   //ajax 请求地址type: "post", //ajax 请求类型async: false,  //是否异步请求autoLength: 0,  //文本长度大于0 就请求服务器getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行clearValue: function(){ }, //当重新请求时清空Value值getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行
        };options = $.extend(defaults, config);var p = c.position();d = $('<div id="autoComplete_Group"></div>');c.after(d);d.css({ "left": p.left, "top": p.top + c.height() + options.top, "width": options.width, "max-height": options.maxheight });t = $('<table cellspacing="0" cellpadding="2"></table>');d.append(t);d.append('<input style="display:none" />');c.bind("keydown", keydown_process);c.bind("keyup", keyup_process);c.bind("blur", blur_process);d.bind("focus", focus_div);d.bind("mouseout", mouseout_div);}function blur_process(){timeid = setTimeout(function(){d.hide();},200);}function mouseout_div(){t.find(".nowRow").removeClass("nowRow");}function focus_div(){clearTimeout(timeid);c.focus();}function keydown_process(e){if(d.is(":hidden")){return;}switch(e.keyCode){case 38:e.preventDefault();var p = t.find(".nowRow").prev();if(p.length > 0){d.setScroll(options.maxheight, p);p.mouseover();}else{p = t.find("tr:last");if(p.length > 0){d.setScroll(options.maxheight, p);p.mouseover();}}break;case 40:e.preventDefault();var n = t.find(".nowRow").next();if(n.length > 0){d.setScroll(options.maxheight, n);n.mouseover();}else{n = t.find("tr:first");if(n.length > 0){d.setScroll(options.maxheight, n);n.mouseover();}}break;case 13:e.preventDefault();var n = t.find(".nowRow");if(n.length > 0){options.getValue(n.find("input:hidden").val());c.val(n.text());options.getText(c.val());lastValue = "";d.hide();}break;}}function keyup_process(e){if(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37 || e.keyCode == 39){return;}if(c.val().length > options.autoLength){if(c.val() == lastValue){  return;  //判断是否跟上一次的值相等, 考虑到用户正在打字 避免相同的值多次请求
            }lastValue = c.val();  //记录请求值options.clearValue(); //清空值getData(c, function(data){if(data.length == 0){d.hide();return;}t.find("tr").remove();$.each(data, function(){t.append('<tr><td>' + this.text + '<input type="hidden" value="' + this.value + '" /></td></tr>');});var rows = t.find("tr");rows.mouseover(function(){t.find(".nowRow").removeClass("nowRow");$(this).addClass("nowRow");});rows.click(function(){options.getValue($(this).find("input:hidden").val());c.val($(this).text());options.getText(c.val());lastValue = "";d.hide();});c.setPosition();d.show();});}else{lastValue = "";d.hide();}}function getData(o,process){$.ajax({type: options.type,async: options.async, //控制同步
            url: options.url,data: o.attr("id") + "=" + o.val(),dataType: "json",cache: false,success: process,Error: function(err) {alert(err);}});}$.fn.resetEvent = function(){c.bind("keydown", keydown_process);c.bind("keyup", keyup_process);c.bind("blur", blur_process);d.bind("focus", focus_div);d.bind("mouseout", mouseout_div);}$.fn.setPosition = function(){var p = c.position();d.css({ "left": p.left, "top": p.top + c.height() + options.top });}$.fn.setScroll = function(h, o){var offset = o.offset();if(offset.top > h){$(this).scrollTop(offset.top - h);}else{if(offset.top < 25){  //项的高度 对应样式表 td height:25px$(this).scrollTop(0);}}}})(jQuery);

    #autoComplete_Group {border: 1px solid #817F82;position: absolute;overflow-y:auto;overflow-x:hidden;display:none;}#autoComplete_Group table {background: none repeat scroll 0 0 #FFFFFF;cursor: default;width: 100%;}#autoComplete_Group td {color: #000000;font: 14px/25px arial;height: 25px;padding: 0 8px;}#autoComplete_Group .nowRow {background-color:#EBEBEB;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>jQuery 仿百度提示框</title><script src="/js/jquery.js" type="text/javascript"></script><link href="/js/autoComplete/autoComplete.css" rel="stylesheet" type="text/css" /><script src="/js/autoComplete/jquery.autoComplete.js" type="text/javascript"></script><script type="text/javascript" language="javascript">$(document).ready(function(){

	    //特别说明：ajax.aspx = 你需要查询的补全的地址（如：http://XX.XXX.X.X/XX/XX.do?XX=X）$("#txt_company").autoComplete({ url:"ajax.aspx" });});</script>
</head>
<body><form id="form1" runat="server"><input id="txt_company" type="text" style="width:468px;" /></form>
</body>
</html>

//说明 string keyword = Request[ " txt_company " ];是前台搜索框的id，并且获得的值

    protected void Page_Load(object sender, EventArgs e){

        string keyword = Request["txt_company"];string jsonArray = "[{\"text\":\"天天有限公司\",\"value\":\"2\"},{\"text\":\"明明有限公司\",\"value\":\"4\"},{\"text\":\"黄黄有限公司\",\"value\":\"4\"}]";Response.Write(jsonArray);Response.End();}

后台只需要返回json格式的 text 和 value值就可以了。

$.fn.resetEvent(); 这个方法是重新绑定事件, 比如从一个容器 append到另一个容器事件丢失了, append完可以使用该方法重新绑定事件。下面还有一些参数。

        var defaults = {width: c.width(), //提示框的宽度 默认跟文本框一样maxheight: 150, //提示框的最大高度top: 6,  //与文本框的上下距离url: "",   //ajax 请求地址type: "post", //ajax 请求类型async: false,  //是否异步请求autoLength: 0,  //文本长度大于0 就请求服务器getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行clearValue: function(){ }, //当重新请求时清空Value值getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行};

这篇关于类似淘宝的搜索智能提示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！