- var line = 0;
- var sendType;
- function del(){
- if($("#newDiv")){
- $("#newDiv").remove();
- line = 0;
- }
- }
- $(document).ready(function(){
- //文本框失去焦点时层消失
- $(document.body).click(function(){
- del();
- });
- $(document).keydown(function(){
- // 38 上 40下 13 回车
- if($("#newDiv")){
- if(event.keyCode == 40){
- $("table tbody tr").eq(line)
- .css("backgroundColor", "blue")
- .css("color", "white");
- $("table tbody tr").eq(line < 0 ? 0 : line - 1)
- .css("backgroundColor", "white")
- .css("color", "black");
- line = (line == $("table tbody tr").length ? 0 : line + 1);
- }else if(event.keyCode == 38){
- line = (line == 0 ? $("table tbody tr").length : line - 1);
- $("table tbody tr").eq(line)
- .css("backgroundColor", "blue")
- .css("color", "white");
- $("table tbody tr").eq(line > $("table tbody tr").length ? 0 : line + 1)
- .css("backgroundColor", "white")
- .css("color", "black");
- }else if(event.keyCode == 13){
- $("#phoneno").val($("table tbody tr").eq(line - 1).find("td").eq(0).html());
- del();
- }
- }
- });
-
- //只要id为phoneno的文本框变化,就调用function()
-
- $("#phoneno").bind("propertychange", function(){
- del();
- var top = $("#phoneno").offset().top;
- var left = $("#phoneno").offset().left;
- var newDiv = $("<div/>").width($("#phoneno").width() + 6)
- .css("position", "absolute")
- .css("backgroundColor", "white")
- .css("left", left)
- .css("top", top + $("#phoneno").height() + 6)
- .css("border", "1px solid blue")
- .attr("id", "newDiv");
-
- var table = $("<table width='100%'/>")
- .attr("cellpadding", "0")
- .attr("cellspacing", "0");
- //$.get("xmlPhoneno", {phoneno: $("#phoneno").val()},function(xml){
- $.get("phoneNoInfo.xml", {PhoneNumber: $("#phoneno").val()},function(xml){
-
- //这里调用了后台的xmlController来执行发挥xml。以下为解析xml
- $(xml).find("phones phone").each(function(){
- var phoneno = $(this).attr("phoneno");
- var sname = $(this).attr("sname");
- var tr = $("<tr/>").css("cursor", "pointer").mouseout(function(){
- $(this).css("backgroundColor", "white").css("color", "black");
- }).mouseover(function(){
- $(this).css("backgroundColor", "blue").css("color", "white");
- }).click(function(){
- $("#phoneno").val($(this).find("td").eq(0).html());
- del();
- });
- var td1 = $("<td/>").html(phoneno).css("fontSize", "12px")
- .css("margin", "5 5 5 5");
- var td2 = $("<td/>").html(sname)
- .attr("align", "right").css("fontSize", "12px")
- .css("color", "green").css("margin", "5 5 5 5");
-
- tr.append(td1).append(td2);
- table.append(tr);
- newDiv.append(table);
- });
- });
- $(document.body).append(newDiv);
- if($("#phoneno").val() == ""){
- $("#newDiv").remove();
- }
- });
- }
使用jquery做类似搜索引擎效果
猜你喜欢
转载自blog.csdn.net/diamondy/article/details/7472442
今日推荐
周排行