js搜索框输入提示(高效-ys8)

<style type="text/css">

.inputbox .seleDiv {

    border: 1px solid #CCCCCC;

    display: none;

    left: 0;

    position: absolute;

    top: 30px;

    width: 220px;

    z-index: 9999;

}

 

.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