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())

};