|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TradeManage.DingDan.WebForm1" %>
|
|
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>js/jQuery实现类似百度搜索功能</title>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../themes/New.css" />
|
|
|
<link rel="stylesheet" type="text/css" href="../themes/DataGrid.css" />
|
|
|
<script src="../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/JSLINQ.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/jquery.bgiframe.min.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/Global.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/jquery.url.js" type="text/javascript"></script>
|
|
|
<script src="../Scripts/WindowLoad.js" type="text/javascript"></script>
|
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
|
<script type="text/javascript">
|
|
|
var data = [
|
|
|
"你好，我是Michael",
|
|
|
"你是谁",
|
|
|
"你最好啦",
|
|
|
"你最珍贵",
|
|
|
"你是我最好的朋友",
|
|
|
"你画我猜",
|
|
|
"你是笨蛋",
|
|
|
"你懂得",
|
|
|
"你为我着迷",
|
|
|
"你是我的眼"
|
|
|
];
|
|
|
var WindowLoadModel = new WindowLoad();
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
WindowLoadModel.ApplicationPath = "../";
|
|
|
WindowLoadModel.ControlID = "WindowLoad";
|
|
|
WindowLoadModel.Isbgiframe = true;
|
|
|
WindowLoadModel.Load();
|
|
|
ajaxInit(WindowLoadModel);
|
|
|
$(document).keydown(function (e) {
|
|
|
e = e || window.event;
|
|
|
var keycode = e.which ? e.which : e.keyCode;
|
|
|
if (keycode == 38) {
|
|
|
if (jQuery.trim($("#append").html()) == "") {
|
|
|
return;
|
|
|
}
|
|
|
movePrev();
|
|
|
} else if (keycode == 40) {
|
|
|
if (jQuery.trim($("#append").html()) == "") {
|
|
|
return;
|
|
|
}
|
|
|
$("#kw").blur();
|
|
|
if ($(".item").hasClass("addbg")) {
|
|
|
moveNext();
|
|
|
} else {
|
|
|
$(".item").removeClass('addbg').eq(0).addClass('addbg');
|
|
|
}
|
|
|
|
|
|
} else if (keycode == 13) {
|
|
|
dojob();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
var movePrev = function () {
|
|
|
$("#kw").blur();
|
|
|
var index = $(".addbg").prevAll().length;
|
|
|
if (index == 0) {
|
|
|
$(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg');
|
|
|
} else {
|
|
|
$(".item").removeClass('addbg').eq(index - 1).addClass('addbg');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
var moveNext = function () {
|
|
|
var index = $(".addbg").prevAll().length;
|
|
|
if (index == $(".item").length - 1) {
|
|
|
$(".item").removeClass('addbg').eq(0).addClass('addbg');
|
|
|
} else {
|
|
|
$(".item").removeClass('addbg').eq(index + 1).addClass('addbg');
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
var dojob = function () {
|
|
|
$("#kw").blur();
|
|
|
var value = $(".addbg").text();
|
|
|
$("#kw").val(value);
|
|
|
$("#append").hide().html("");
|
|
|
}
|
|
|
});
|
|
|
var list = new Array();
|
|
|
function GetGoodsSelect() {
|
|
|
if (jQuery.trim($("#kw").val()) == "")
|
|
|
return;
|
|
|
var param = new Object();
|
|
|
param.SKU = $("#kw").val();
|
|
|
WindowLoadModel.Show();
|
|
|
$.ajax({
|
|
|
url: "DD_OrderService.asmx/GetGoodsModelFromSku1",
|
|
|
data: Sys.Serialization.JavaScriptSerializer.serialize(param),
|
|
|
async: false,
|
|
|
success: function (data) {
|
|
|
WindowLoadModel.Hide();
|
|
|
|
|
|
if (data.d != null) {
|
|
|
list = data.d;
|
|
|
if (list != null && list.length > 0)
|
|
|
readflag = true;
|
|
|
//var jsondata;
|
|
|
// jsondata = $.parseJSON(data.d);
|
|
|
//$("#language").combobox("loadData", jsondata);
|
|
|
// $("#language").combobox("loaddata", data.d)
|
|
|
//$(data.d).each(function () {
|
|
|
// $("#select_sku").append("<option value='"+this.DetailId+"'>"+this.SKU1+"</option>");
|
|
|
|
|
|
//});
|
|
|
}
|
|
|
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
var readflag = false;
|
|
|
var readlen = 0;
|
|
|
function getContent(obj) {
|
|
|
var kw = jQuery.trim($(obj).val());
|
|
|
|
|
|
if (kw == "") {
|
|
|
$("#append").hide().html("");
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
var html = "";
|
|
|
//if (readflag==false)
|
|
|
GetGoodsSelect();
|
|
|
|
|
|
if (list != null && list.length > 0)
|
|
|
{
|
|
|
|
|
|
$(list).each(function () {
|
|
|
if (this.SKU1.indexOf(kw) >= 0) {
|
|
|
html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);' did='"+this.DetailId+"'>" + this.SKU1 + "</div>"
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
//for (var i = 0; i < data.length; i++) {
|
|
|
// if (data[i].indexOf(kw) >= 0) {
|
|
|
// html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
|
|
|
// }
|
|
|
//}
|
|
|
if (html != "") {
|
|
|
$("#append").show().html(html);
|
|
|
} else {
|
|
|
$("#append").hide().html("");
|
|
|
}
|
|
|
}
|
|
|
function getFocus(obj) {
|
|
|
$(".item").removeClass("addbg");
|
|
|
$(obj).addClass("addbg");
|
|
|
}
|
|
|
var id = 0;
|
|
|
function getCon(obj) {
|
|
|
var value = $(obj).text();
|
|
|
id = $(obj).attr("did");
|
|
|
$("#kw").val(value);
|
|
|
$("#append").hide().html("");
|
|
|
}
|
|
|
function Save()
|
|
|
{
|
|
|
alert(id);
|
|
|
}
|
|
|
</script>
|
|
|
<style type="text/css">
|
|
|
#container{
|
|
|
position:absolute;
|
|
|
left:50%;
|
|
|
top: 40%;
|
|
|
}
|
|
|
#content{
|
|
|
float:left;
|
|
|
position:relative;
|
|
|
right:50%;
|
|
|
}
|
|
|
input{
|
|
|
border:0;
|
|
|
width:288px;
|
|
|
height:30px;
|
|
|
font-size:16px;
|
|
|
padding:0 5px;
|
|
|
line-height:30px;
|
|
|
}
|
|
|
.item{
|
|
|
padding:3px 5px;
|
|
|
cursor:pointer;
|
|
|
}
|
|
|
.addbg{
|
|
|
background:#87A900;
|
|
|
}
|
|
|
.first{
|
|
|
border:solid #87A900 2px;
|
|
|
width:300px;
|
|
|
}
|
|
|
#append{
|
|
|
border:solid #87A900 2px;
|
|
|
border-top:0;
|
|
|
display:none;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="container">
|
|
|
<div id="content">
|
|
|
<div class="first"><input id="kw" onKeyup="getContent(this);" /></div>
|
|
|
<div id="append"></div>
|
|
|
</div>
|
|
|
<input id="cmdSave" type="button" value="保 存" class="btnClass btnClassSave" onclick="Save();" /></div>
|
|
|
</body>
|
|
|
</html> |
