To share a jQuery was similar to Baidu search box, (dynamic configuration, can b

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Requirements: similar to Baidu search box, configurable, can be single can be table format, can be filled with data. The page can be repeated use, simple, easy to use.

Idea: use jQuery, CSS, AJAX, the call returns, the background of JSON data.

JQuery code:

var highLightIndex = -1; var list;

var trBgHover, trBgKey;

var define = {

processKeyup: function (event) {

var id = $(this).attr("id");

var keyCode = event.keyCode;

if (keyCode == 13) {

if (highLightIndex != -1) {

var gid = $('#searchTable').find('tr:gt(0)').eq(highLightIndex).attr('gid');

define.bindData(gid, id, $('#searchTable').find('tr:gt(0)').eq(highLightIndex).children('td:first').text());

$(this).next('.tip').remove();

highLightIndex != -1;

}

}

else if (keyCode == 38 || keyCode == 40) {

var words = $('#searchTable').find('tr:gt(0)');

var num = words.length;

if (num <= 0) return;

if (highLightIndex != -1) {

words.eq(highLightIndex).css('background-color', trBgKey);

}

highLightIndex = ((keyCode != 38 ? num + 1 : num - 1) + highLightIndex) % num;

trBgKey = words.eq(highLightIndex).css('background-color');

words.eq(highLightIndex).css('background-color', '#e1eff4');

$('#' + $(this).attr("id")).val(words.eq(highLightIndex).find("td").get(0).innerHTML);

}

else {

if ($(this).next('.tip').length == 0) {

var tmpLeft = $(this).offset().left;

$(this).after('<div class="tip"></div>');

$(this).next('.tip').css({ 'left': tmpLeft, 'top': $(this).offset().top + 20 });

}

var source = $(this).val();

if (source == "") {

$(this).next('.tip').remove();

}

var url = $(this).attr("url");

var domain = $(this).attr("domain");

var opers = $(this).attr("oper");

$.ajax({

type: "get",

async: false,

dataType: "text",

cache: false,

data: "oper=" + opers + "&tj=" + source + "&domain=" + domain,

url: url,

success: function (d) {

list = d;

}

});

list = eval(list);

if (list.length == 0) {

$(this).next('.tip').remove();

var idlist = $(this).attr("hidId");

var tmp = idlist.split('&');

for (var i = 0; i <tmp.length; i++) {

$("#" + tmp[i]).val('');

}

}

$(this).next('.tip').empty();

var objid = $(this).attr('id');

var znRow = $(this).attr('cnrowbind');

var tmp10 = znRow.split(',');

$(this).next('.tip').append("<table id='searchTable'><thead><tr></tr></thead></table>");

for (var i = 0; i <tmp10.length; i++) {

$('#searchTable thead tr').append("<th>" + tmp10[i] + "</th>");

}

var thLength = $('#searchTable').find('th').length;

if (thLength == 1) $('#searchTable').find('th').parent('tr').hide();

var enRow = $(this).attr('enrowbind');

var tmp11 = enRow.split(',');

for (var i = 0; i <list.length; i++) {

$(this).next('.tip').children('table').append("<tr index = " + i + " id='tmp' gid='" + list[i][tmp11[0]] + "' onclick = 'define.bindData(\"" + list[i][tmp11[0]] + "\",\"" + objid + "\",\"" + list[i][tmp11[1]] + "\",this)'></tr>");

for (var j = 1; j <tmp11.length; j++) {

$('#tmp').append("<td>" + list[i][tmp11[j]] + "</td>");

}

$('#searchTable tr').removeAttr('id');

}

$('#searchTable tr:odd').css('background-color', '#FFF');

$('#searchTable tr:even').css('background-color', '#F1F1F1');

$('#searchTable tr').hover(function () {

trBgHover = $(this).css('background-color');

$(this).css('background-color', '#e1eff4');

}, function () {

$(this).css('background-color', trBgHover);

});

}

},

bindData: function (obj, id, tmp, obj) {

$("#" + id).next('.tip').remove();

$("#" + id).val(tmp);

var idlist = $("#" + id).attr("hidId");

var tmp = idlist.split('&');

var listlist = list[highLightIndex];

if (listlist == undefined) {

listlist = list[$(obj).attr('index')];

}

var tmp12 = $("#" + id).attr('enrowbind');

var tmp13 = tmp12.split(',');

for (var i = 0; i <tmp.length; i++) {

$("#" + tmp[i]).val(listlist[tmp13[i + 1]]);

}

}

};

CSS code:

.tip

{

width: auto;

height: auto;

min-width: 138px;

max-height: 260px;

overflow: auto;

position: absolute;

box-shadow: 1px 1px 3px #a5a5a5;

}

#searchTable

{

width: 100%;

+width:auto;

border-top: 1px solid #d0d0d0;

border-bottom: 1px solid #d0d0d0;

border-collapse: collapse;

}

#searchTable tr

{

height: 26px;

}

#searchTable th, #searchTable td

{

border: 1px solid #d0d0d0;

font-size: 13px;

}

#searchTable th

{

background-color: #F1F1F1;

}

.time

{

border: 1px solid #c9c9c9;

width: 140px;

}

Page calls and backstage access ashx writing:

<link href="../../Css/definecss.css" rel="stylesheet" />

<script src="../../Scripts/define.js" type="text/javascript"></script>

Quote.

<script type="text/javascript">

$(function () {

$("#<%= txtCostCentreId1.ClientID%>").bind("keyup", define.processKeyup);

Binding

$("#<%= txtCostCentreId1.ClientID%>").keypress(function (event) {

if (event.keyCode == 13) {

event.preventDefault();

}

});

Don't let the page enter and control enter conflict

$('*').click(function () {

var flag = $(this).is('.tip');

if (!flag) $('.tip').remove();

});

})

Divremove click somewhere else

document.onkeydown = function (event) {

if (event.keyCode == 13) {

if (event.srcElement.tagName.toLowerCase() == "input")

event.returnValue = false;

}

}Don't let the page enter and control enter conflict

</script>

<asp:TextBox ID="txtCostCentreId1" runat="server" CssClass="time" url="../../UserControl/Search/Bindajax.ashx"

oper="CostCenter" domain="y301" cnrowbind="Cost centre number" enrowbind="CostCenterId,CostCenterId" autocomplete="off"

hidid="ctl00_ctl00_masterMain_masterMain_txtCostCentreId1" />

Control is configured for URL access ashx address oper class domain current company number (I is the background to write) txtCostCentreId1.Attributes["domain"] = TMP; cnrowbind display Chinese columns can be more (see red)

Enrowbind corresponds to the English column like hidid must and JSON is data to those controls filling

Chinese column (if it is 3 column configuration 3) English column second column corresponds to the first column Chinese English first column as a unique number column

If you configure of 2 Chinese listed hidid up to 2 controls filling value to the query value filled to the ID you specify


<asp:TextBox ID="txtApplyGroup" runat="server" CssClass="time" url="../../../UserControl/Search/Bindajax.ashx"

oper="Workgroupall" domain="" cnrowbind="Department number, apply for cost center, apply for warehouse"

enrowbind="WorkgroupId,WorkgroupId,CostCenterName,StorehouseName" autocomplete="off"

hidid="ctl00_ctl00_masterMain_masterMain_txtApplyGroup&ctl00_ctl00_masterMain_masterMain_txtApplyCostCentre&ctl00_ctl00_masterMain_masterMain_txtApplyStorehouseId"></asp:TextBox>

Ashx code:

Access conditions, to query data, returns JSON.

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

string oper = context.Request.QueryString["oper"];

string tj = context.Request.QueryString["tj"];

string orgdomain = context.Request.QueryString["domain"];

DataTable dt;

string message = "";

if (oper == "Workgroup")

{

dt = KernelManager.GetTableWorkgroup(orgdomain, tj);

message = dt.Rows.Count > 0 ? JsonHelper.ToJson(dt) : "";

}

else if (oper == "Material")

{

dt = MasterDataManager.GetTableMaterialInfo(orgdomain, tj);

message = dt.Rows.Count > 0 ? JsonHelper.ToJson(dt) : "";

}

Below is shown in the picture. The project compatibility is good


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Carry at November 28, 2013 - 7:43 AM