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

<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