<style type="text/css">

.inputbox .seleDiv {

    border: 1px solid #CCCCCC;

    display: none;

    left:;

    position: absolute;

    top: 30px;

    width: 220px;

    z-index:;

}

.inputbox {

    float: right;

    height: 30px;

    line-height: 30px;

    position: relative;

}

.inputbox .seleDiv ul {

    background: none repeat scroll 0 0 #FFF6CB;

}

.inputbox .seleDiv ul li {

    border-top: 1px solid #FFFFFF;

    color: #000000;

    cursor: pointer;

    height: 25px;

    line-height: 25px;

    padding-left: 2px;

    text-align: left;

}

</style>
<div class="inputbox">

    <input type="text" id="txtKey" style="opacity: 0.5;">

    <span style="color: Red">在这里可以快速搜索哦</span>

    <div class="seleDiv" style="display: none;"><ul><li point="12571893.06640625,3256542.96875" title="您是不是在长沙高新区附近" style="color: rgb(0, 0, 0);">长沙高新区</li></ul></div>

</div>

$(".seleDiv li").live('mousemove', function () {

    $(this).css({ "background": "#F0850F", "color": "#FFF" })

})

$(".seleDiv li").live('mouseout', function () {

    $(this).css({ "background": "", "color": "#000" })

})

$(".seleDiv li").live('click', function () {

    $("#txtKey").val($(this).text());

    $(".seleDiv").slideUp();

    var point = $(this).attr("point").split(",");

    map.setCenter(new sogou.maps.Point(point[0], point[1]), 16);

    //----------------------- 重复代码需要重构 赶项目暂时这样用着

    var infowindow = new sogou.maps.InfoWindow();

    //获取点击位置的坐标

    var conrXY = new sogou.maps.Point(point[0], point[1]);

    //500 米内的

    //  var bounds = convertor.bounds(event.point, 250);

    //绘制圆形

    //删除之前

    if (cityCircle) {

        cityCircle.setMap(null);

    }

    var populationOptions = {

        strokeColor: "#FF0000",

        strokeOpacity: 0.8,

        strokeWeight: 2,

        fillColor: "#FF0000",

        fillOpacity: 0.35,

        map: map,

        center: conrXY,

        radius: 250

    };

    cityCircle = new sogou.maps.Circle(populationOptions);

    //获取地区

    GodsPoint = conrXY.toString();

    //老方法

    var addsLis = getmapList(conrXY);

    //新方饭

    /// var addsLis = getmapList(bounds);

    if (addsLis == "-1")

        return;

    infowindow.setPosition(conrXY);

    infowindow.setContent(addsLis);

    infowindow.setTitle("您是不是在:");

    setTimeout(function () { infowindow.open(map) }, 10);

})

$(".boxDiv").blur(function () {

    $(".seleDiv").slideUp();

})

$(".boxDiv").toggle(function () {

    $(".seleDiv").slideDown()

},

function () {

    $(".seleDiv").slideUp()

})

var n = -1;

$("#txtKey").click(function () {

    n = -1;

    if ($(this).val() == "这里可以模糊搜索,比如:软件园") {

        $(this).val("");

    }

});

$("#txtKey").keyup(function () {

    var theEvent = window.event || arguments.callee.caller.arguments[0]

    var liSize = $(".seleDiv li").size();

    var Code = theEvent.keyCode;

    if (Code == "38" || Code == "40" || Code == "13") {

        if (Code == "13") {

            //按回车选定,并加载选择项绑定的坐标

            $("#txtKey").val($(".seleDiv li").eq(n).text());

            var point = $(".seleDiv li").eq(n).attr("point").split(",");

            map.setCenter(new sogou.maps.Point(point[0], point[1]), 16);

            $(".seleDiv").hide();

        }

        else {//按键盘上下控制

            yongshan = yongshan || new yongshan(jQuery);

            n = yongshan.setInputEvent("txtKey", Code, liSize, n);

        }

    }

    else {//输入文字--加载提示

        if ($(this).val().length >= 2) {

            $(".seleDiv").slideDown();

            var keyName = $(this).val();

            var parms = "";

            parms += "keyName=" + encodeURIComponent(keyName);

            var url = "/asp/ShopsMaps/SearchAdds/getListByKey/" + parms + "?";

            var result = ajax(url);

            result = eval("(" + result + ")");

            var Outli = "";

            if (result.Rows.length == 0) {

                $(".seleDiv").html("<ul><li>没有相关数据</li></ul>");

            }

            else {

                for (var j = 0; j < result.Rows.length; j++) {

                    Outli += "<li title='您是不是在" + result.Rows[j][0] + "附近' point='" + result.Rows[j][1] + "'>" + result.Rows[j][0] + "</li>";

                }

                $(".seleDiv").html("");

                $(".seleDiv").html("<ul>" + Outli + "</ul>");

            }

        }

        else {//展开提示

            $(".seleDiv").slideUp();

        }

    }

})//keyup end

var yongshan = (function ($) {

    setInputEvent = function (inputID, Code, ListSize, n) {

        if (Code == 40) {

            if (n == ListSize - 1) {

                n = -1;

            }

            n = n + 1;

            $(".seleDiv li").css("background", "#FFF6CB").eq(n).css("background", "#F0850F");

        }

        if (Code == 38) {

            if (n == 0) {

                n = ListSize;

            }

            n = n - 1;

            $(".seleDiv li").css("background", "#FFF6CB").eq(n).css("background", "#F0850F");

        }

        return n;

    },

    getInputVal = function (box) {

        //增加,修改的时候遍历参数     

        //遍历参数

        var parList = "";

        jQuery("#" + box).find(":input").each(function (i) {

            if (jQuery(this).attr("type") != 'checkbox' && jQuery(this).attr("type") != 'radio' && jQuery(this).attr("name")) {

                parList = parList + ';' + jQuery(this).attr('name') + '=' + encodeURIComponent(jQuery(this).val());

            }

        }); //each end  encodeURIComponent

        jQuery("#" + box).find("input:checked").each(function () {

            parList += ";" + jQuery(this).attr('name') + '=' + encodeURIComponent(jQuery(this).val());

        })//each end

        return parList;

    }

    ClearInputVal = function (box) {

        var parList = "";

        jQuery("#" + box).find(":input").each(function (i) {

            $(this).val("");

        });

    }

    return {

        setInputEvent: setInputEvent,

        getInputVal: getInputVal,

        ClearInputVal: ClearInputVal

    }

} (jQuery));

var pubobj = {};

pubobj.j = 0;

pubobj.Brow = {

    ie: /msie/.test(window.navigator.userAgent.toLowerCase()),

    moz: /gecko/.test(window.navigator.userAgent.toLowerCase()),

    opera: /opera/.test(window.navigator.userAgent.toLowerCase()),

    safari: /safari/.test(window.navigator.userAgent.toLowerCase())

};

其它例:http://blog.csdn.net/shiyuezhong/article/details/8060159

js搜索框输入提示(高效-ys8)的更多相关文章

  1. vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据

    如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据.如图所示: html代码: <input type="text" placeholder="姓名/账号 ...

  2. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  3. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  4. ASP.NET JQuery 随笔-搜索框默认提示

    一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...

  5. Jquery实现文本框输入提示

    一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: ...

  6. Ternary Search Tree 应用--搜索框智能提示

    前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...

  7. 转摘:ashx+jquery-autocomplete文本框输入提示功能Asp.net

    引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...

  8. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  9. bootstrap-select搜索框输入中文

    bootstrap-select 的搜索框无法输入中文,解决办法: 删除源码中这两行代码 that.$lis.not('.hidden, .divider, .dropdown-header').eq ...

随机推荐

  1. windows 环境下wamp环境的搭建。

    学php要搭建wamp环境,经常使用的是wampserver,也挺好用的,一键傻瓜式安装,挺省事的.但是程序员都是爱折腾的,总要求要有完美的环境.于是用来用去,觉得还是散装环境最能体现自己的逼格. 其 ...

  2. 实现BPEL4WS演示:教程

    http://www.ibm.com/developerworks/cn/education/webservices/ws-bpelws/bpel_tutorial_cn.html 开始 什么是Bus ...

  3. geoip2 domain

    DatabaseReader cityReader = GeoIP2Utils.getCityReader(); InetAddress inetAddress = InetAddress.getBy ...

  4. mysql 字符串

    mysql中一个字符串,既可以用两个单引号表示,也可以用两个双引号表示. 比如字符串 wangxiaowei,用单引号表示 'wangxiaowei',双引号表示"wangxiaowei&q ...

  5. jquery id选择器 id带"."问题

    例如控件ID为user.id 使用$("#user.id")不能得到正确的结果 必须使用\\转义 即$("#user\\.id")

  6. JavaScript学习笔记——数组

    javascript数组数组是一个可以存储 一组 或是 一系列 相关数据 的 容器. 一.为什么要使用数组. (1)为了解决大量相关数据的存储和使用的问题. (2)模拟真是的世界. 二.如何创建数组 ...

  7. VC----Class Style类风格和窗口风格

    CS_BYTEALIGNCLIENT:以字节边界来对齐窗口客户区,这个风格会影响 窗口 的宽度和水平位置.实际上没有看到效果. CS_BYTEALIGNWINDOW:以字节边界来对齐窗口,这个风格会影 ...

  8. ECSHOP MYSQL 公用类库中的autoExecute方法

    include/cls_mysql.php 正常操作 例如: $sql = “UPDATE ecs_user SET user = ‘buxuan’ WHERE user_id = ″; $db-&g ...

  9. 用淘宝ip地址库查ip

    这是一个通过调用淘宝ip地址库实现ip地址查询的功能类 using System; using System.Collections.Generic; using System.Linq; using ...

  10. java中的各个数据结构区别

    ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存操作,所以索引数据快插入数据慢 ...