這是一個雙輸入框的一個複合查詢，第一個textbox是為了展示搜尋出來的內容，第二個input輸入框是提供條件輸入，得到對應的查詢資料，然後點選下面的條件資料，給第一個textbox展示內容，然後儲存到資料庫中；

 

前端程式碼：

<span class="cg_bj_info_tit"><span>*</span>客戶：</span>
<span class="cg_bj_info_nr">
<asp:TextBox ID="TxtCustomer" CssClass="cgdlb_filter_input" placeholder="請填寫客戶" runat="server"></asp:TextBox>

<input class="cgd_input cgdlb_filter_input" type="text" id="ddlCustomer" placeholder="請填寫客戶"
oninput="BusinessCls.BusinessAutoComplate(this);" onpropertychange="BusinessCls.BusinessAutoComplate(this);" />
<div class="cgcp_search_info_box fbPro_ss_info" style="display: none;"></div>
</span>

 

jquery程式碼：

//出差相關的客戶搜尋
var BusinessCls = {
　　//客戶搜尋自動完成
　　BusinessAutoComplate: function (txtobj) {
　　　　var keyword = $(txtobj).val();
　　　　if (keyword == "") {
　　　　　　return;
　　　　}

　　　　$.ajax({
　　　　　　type: "POST", url: "Serv.ashx?op=businessTripApplicationSearch",

　　　　　　data: "keyword=" + keyword + "",
　　　　　　success: function (res) {
　　　　　　　　$(".cgcp_search_info_box").empty();
　　　　　　　　var data = eval(res).message;

　　　　　　　　//data輸出內容：    "[{"Key":45,"Value":"XX軌道工程有限公司"},{"Key":24,"Value":"XX纖維有限公司"},{"Key":41,"Value":"XX軌道交通"},{"Key":39,"Value":"XX集團有限公司"}]"
　　　　　　　　if (data && data != null && data.length > 0) {
　　　　　　　　　　$.each($.parseJSON(data), function (i, item) {
　　　　　　　　　　　　$(".cgcp_search_info_box").append("<div class='cgcp_search_info' data-id='" + item.Key + "' data-name='" + item.Value + "'>" + item.Value + "</div>");
　　　　　　　　　　});
　　　　　　　　　　$(".cgcp_search_info_box div").unbind("click");
　　　　　　　　　　$(".cgcp_search_info_box div").on("click", function () {
　　　　　　　　　　　　$("#TxtCustomer").val($(this).attr("data-name"));
　　　　　　　　　　　　$(".cgcp_search_info_box").hide();
　　　　　　　　　　});
　　　　　　　　} else {
　　　　　　　　　　$(".cgcp_search_info_box").text("沒有找到任何產品");
　　　　　　　　}
　　　　　　　　$(".cgcp_search_info_box").show();
　　　　　　}
　　　　});

　　}
}

 

ashx程式碼：

public class Serv : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{

　　protected string ConnStr = Utility.GetConnectionString("XXX");
　　public void ProcessRequest(HttpContext context)
　　{
　　　　context.Response.AddHeader("Content-Type", "application/json; charset=UTF-8");

　　　　if (DataConvert.ToInt(context.Session["LoginID"]) == 0)
　　　　{
　　　　　　context.Response.Write("{\"code\":1,\"message\":\"您尚未登入或登入已超時，請先登入！\",\"data\":\"\"}");
　　　　}
　　　　else
　　　　{
　　　　　　string op = DataConvert.ToString(context.Request.QueryString["op"]);
　　　　　　switch (op)
　　　　　　{

　　　　　　　　case "businessTripApplicationSearch": 
　　　　　　　　BusinessTripApplicationSearch(context);
　　　　　　　　break;

　　　　　　}
　　　　}

　　　　context.Response.End();
　　}

 

　　public void BusinessTripApplicationSearch(HttpContext context)
　　{
　　　　string keyword = DataConvert.ToString(context.Request["keyword"]);
　　　　if (string.IsNullOrEmpty(keyword))
　　　　{
　　　　　　Write(context, -1, "搜尋內容不能為空", string.Empty);
　　　　}
　　　　keyword = Utility.EncodeTitleText(keyword);

　　　　List<object> resultdata = new List<object>();

　　　　string querysql = @"select top 10 Id,CustomerName from GYL_CG_OA_Customer where IsDeleted = 0 and CustomerName like '%" + keyword + @"%'";
　　　　DataSet resultds = DB.DataSet(Common.KeyWordB2C, querysql);
　　　　if (DataHelper.ExistsDataSet(resultds))
　　　　{
　　　　　　foreach (DataRow row in resultds.Tables[0].Rows)
　　　　　　{
　　　　　　　　int CustomerId = DataConvert.ToInt(row["Id"]);
　　　　　　　　string CustomerName = Utility.DecodeTitleText(DataConvert.ToString(row["CustomerName"]));

　　　　　　　　resultdata.Add(new
　　　　　　　　{
　　　　　　　　　　Key = CustomerId,
　　　　　　　　　　Value = CustomerName
　　　　　　　　});
　　　　　　}
　　　　}

　　　　Write(context, 0, Newtonsoft.Json.JsonConvert.SerializeObject(resultdata), string.Empty);
　　}

}

&n