仿百度搜索功能

/**
 *鼠标选中某个li方法
 *1.参数obj:this
 */
function ulLiText(obj) {
    //检索条件可按名称字母查询
    $("#nameZm").val($(obj).text());
    //调用省级列表
    getAreaList();
    //隐藏检索信息
    $("#carName").hide();
}

//显示背景颜色
 $(‘#carName ul li‘).mouseover(function () {
        $(this).css("backgroundColor", "white");
    }).mouseout(function () {
        $(this).css("backgroundColor", "");
    });

var i = -1;

//键盘操作
                $(document).keyup(function (event) {

var num = Number($("#indexUl").val());
                    i = Number($("#indexUl").val());

if (event.keyCode == 13) {
                        //一组li的长度
                        var lenLi = $("#ulCarName li").length;

for (var i = 0; i < lenLi; i++) {
                            if (i == Number($("#indexUl").val())) {

$("#nameZm").val($("#ulCarName .li_" + i).text());
                                //调用省级列表
                                var currentIndex = $("#currentIndex").val();
                                //查询条件
                                var nameZm = $("#nameZm").val();
                                var list = {
                                    nameZm: nameZm,
                                    pageIndex: currentIndex
                                }
                                getAreaList(list);
                                //隐藏检索信息
                                $("#carName").hide();
                            }
                        }
                    } //向下
                    else if (event.keyCode == 40) {
                        //如果等于索引等于总行数
                        if ((Number($("#countRows").val()) - 1) == Number($("#indexUl").val())) {
                            i = -1;
                        }
                        i += 1;
                        $("#ulCarName .li_" + i).css("backgroundColor", "gray");
                        //隐藏域存储li的索引
                        $("#indexUl").val(i);
                    } //向上
                    else if (event.keyCode == 38) {
                        //如果等于索引等于0
                        if (num == 0) {
                            num = Number($("#countRows").val());
                        }
                        num = num - 1;
                        $("#ulCarName .li_" + num).css("backgroundColor", "gray");
                        //隐藏域存储li的索引
                        $("#indexUl").val(num);
                    };
                });

//显示检索内容
                if ($("#nameZm").val() != "") {
                    // $("#carName").show();
                    for (var i = 0; i < resultData.length; i++) {
                        hmt += ‘<li onclick="ulLiText(this)" class="li_‘ + i + ‘"><a style="color:#000;">‘ + resultData[i].ReMark + ‘</a></li>‘
                    }
                    //显示检索内容
                    $("#ulCarName").empty().append(hmt);
                    //隐藏域存值
                    $("#countRows").val(resultData.length);
                    //鼠标悬浮加背景颜色
                    $(‘#carName ul li‘).mouseover(function () {
                        $(this).css("backgroundColor", "gray");
                    }).mouseout(function () {
                        $(this).css("backgroundColor", "");
                    });
                }

时间: 2024-11-03 21:57:52

仿百度搜索功能的相关文章

angular的仿百度搜索功能

尝试一下调用百度的搜索功能,这部分主要是练习$http. 首先HTML部分: <div ng-app="myApp" ng-controller="Aaa""> <input type="text" ng-model="name" ng-keyup="change(name)" placeholder="请输入搜索内容">//内容的搜索框 <inp

vue-resource使用 (vue仿百度搜索)

1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> network ==> 复制js https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1440_25548_21098_20719&req=2&csor=1&c

仿百度搜索提示框效果

<!doctype html><html><head> <meta charset="UTF-8"> <title>百度搜索提示框</title> <style> * { margin: 0;padding: 0; outline: none;} .search101 { width: 650px; margin: 300px auto; font-size: 0; } .sou1 { width: 5

仿百度搜索(AJAX)

<h1>百度搜索</h1><!--建立一个DIV,其中包括一个文本输入框和一个按钮--><div id="sousuo"> <input type="text" id="txt"/><input type="button" id="btn" value="搜索" /> <!--再建一个DIV用于显示关键字查询出

百度搜索功能

<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>百度搜索</title> <script src="js/angular.min.js"></script> <script>  var m1=angula

仿百度搜索,匹配历史搜索

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>历史搜索</title> <script type="text

使用Jquery UI 高仿百度搜索下拉列表功能

最近项目有个需求,在新添加商户的时候,用户输入商户名称后,如果系统中有类似的商户名称,直接显示出来,如下图的效果: 实现这个功能,直接使用了JQuery UI 插件 目前我使用的实现版本是: 网友可以自行下载好js文件,css文件,放在你项目可以访问到位置就可以了. 引入这些文件之后,你就可以复制使用下面的页面来测试(注意引用文件的路径): <!doctype html><html lang="en"><head> <meta charset=

Ajax 连接数据库实现类似百度搜索功能

1.Html代码部分 <!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> <meta http-equiv=&qu

ashx仿百度搜索的自动下拉列表

制作环境是在c#中 先是前台页面,可以是aspx也可以是html页面,这就是ashx的好处 代码: 1 <div> 2 <input type="text" id="search" onkeyup="SearchTo()" /><input type="button" value="查询" /><br /> 3 <div id="search_