You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

219 lines
7.3 KiB
Plaintext

2 months ago
<%@ 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>