智能提示含查詢多列（html+JS+handler+ HttpRemoting）一、html示列加 JS加請求 Handler

1 <html> 2 <head> 3 </head> 4 <body> 5 <form id="recordform" name="recordform" autocomplete="off"> 6 <table cellpadding="0" cellspacing="0" class="tab ...

 1 <html>
 2 <head>
 3 </head>
 4 <body>
 5     <form id="recordform" name="recordform" autocomplete="off">
 6 <table cellpadding="0" cellspacing="0" class="tablepadding">
 7                         <%--                        <tr>
 8                             <td rowspan="7" style="width: 40%;">
 9                                 <select size="4" name="lboxReceive" id="lboxReceive" tabindex="-1" style="width: 100%; height: 90%;">
10                                 </select>
11                             </td>
12                         </tr>--%>
13                         <tr>
14                             <th>收貨人：</th>
15                             <td>
16                                 <input id="txtReceiveName" name="txtReceiveName" type="text" class="form-control required" paihang /><span class="required"></span></td>
17                         </tr>
18                         <tr>
19                             <th>手　機：</th>
20                             <td>
21                                 <input id="txtReceiveHand" name="txtReceiveHand" type="text" class="form-control" paihang /></td>
22                         </tr>
23                         <tr>
24                             <th>電　話：</th>
25                             <td>
26                                 <input id="txtReceiveTel" name="txtReceiveTel" type="text" class="form-control" paihang /></td>
27                         </tr>
28                         <tr>
29                             <th>單　位：</th>
30                             <td>
31                                 <input id="txtReceiveCorp" name="txtReceiveCorp" maxlength="200" type="text" class="form-control" paihang /></td>
32                         </tr>
33                         <tr>
34                             <th>地　址：</th>
35                             <td>
36                                 <input id="txtReceiveAddress" name="txtReceiveAddress" maxlength="200" type="text" class="form-control" paihang /></td>
37                         </tr>
38                         <tr>
39                             <th>&nbsp;</th>
40                             <td>&nbsp;</td>
41                         </tr>
42                     </table>
43  </form>
44 <script type="text/javascript">
45         $(function () {
46 inputBindQuery("txtSendName", txtNamechange);
47 }）；
48  function txtNamechange() {
49             MessageError = MessageError + 1;
50             $("#txtSendName_Id").val("");//清空發貨方id
51             var stationName = $("#dropAcceptStation").find("option:selected").text().trim();
52             if (stationName !== "請選擇") {
53                 var queryParams = {
54                     "columns": "<%=QueryTypeKey.發貨方_發貨方%>,<%=QueryTypeKey.發貨方_聯繫人%>,<%=QueryTypeKey.發貨方_手機%>,<%=QueryTypeKey.發貨方_電話%>,<%=QueryTypeKey.發貨方_單位%>,<%=QueryTypeKey.發貨方_地址%>",
55                     "sorts": "<%=QueryTypeKey.發貨方_發貨方%>",
56                     "queryType": "<%=(int)QueryType.CustomerShipperInfo%>",
57                     "searchKey": $("#txtSendName").val(),
58                     "stationName": stationName
59                 };
60                 var options = { "queryParams": queryParams };
61                 options.setData = setData;
62                 autocomplete("txtSendName", options);
63             } else {                
64                 if (MessageError===1) {
65                     alert("請先選擇攬收站點！");
66                 }
67             }
68         };
69 //選擇下拉框內容後回調填充方法
70  function setData(dt) {
71             $("#txtSendName").val(dt[0]);
72             $("#txtSendLinkUser").val(dt[1]);
73             $("#txtSendHand").val(dt[2]);
74             $("#txtSendTel").val(dt[3]);
75             $("#txtSendCorp").val(dt[4]);
76             $("#txtSendAddress").val(dt[5]);
77             $("#txtSendName_Id").val(dt[6]);
78             //設置收貨方為輸入項
79             $("#txtReceiveName").focus();
80             $("#txtReceiveName").val(dt[0]);
81             txtNamechange4();
82             $("#txtReceiveName").val("");
83         };
84     </script>
85 </body>
86 </html>

智能提示html 代碼

  1 var new_element = document.createElement("script");
  2 new_element.setAttribute("type", "text/javascript");
  3 new_element.setAttribute("src", "/content/bjui/plugins/bootstrap.min.js");
  4 document.body.appendChild(new_element);
  5 /**
  6          * jQuery "splendid textchange" plugin
  7          * http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html
  8          *為了適應ie 8 9 不觸發彈框
  9          * (c) 2013 Ben Alpert, released under the MIT license
 10          */
 11 
 12 (function ($) {
 13 
 14     var testNode = document.createElement("input");
 15     var isInputSupported = "oninput" in testNode &&
 16         (!("documentMode" in document) || document.documentMode > 9);
 17 
 18     var hasInputCapabilities = function (elem) {
 19         // The HTML5 spec lists many more types than `text` and `password` on
 20         // which the input event is triggered but none of them exist in IE 8 or
 21         // 9, so we don't check them here.
 22         // TODO: <textarea> should be supported too but IE seems to reset the
 23         // selection when changing textarea contents during a selectionchange
 24         // event so it's not listed here for now.
 25         return elem.nodeName === "INPUT" &&
 26             (elem.type === "text" || elem.type === "password");
 27     };
 28 
 29     var activeElement = null;
 30     var activeElementValue = null;
 31     var activeElementValueProp = null;
 32 
 33     /**
 34      * (For old IE.) Replacement getter/setter for the `value` property that
 35      * gets set on the active element.
 36      */
 37     var newValueProp = {
 38         get: function () {
 39             return activeElementValueProp.get.call(this);
 40         },
 41         set: function (val) {
 42             activeElementValue = val;
 43             activeElementValueProp.set.call(this, val);
 44         }
 45     };
 46 
 47     /**
 48      * (For old IE.) Starts tracking propertychange events on the passed-in element
 49      * and override the value property so that we can distinguish user events from
 50      * value changes in JS.
 51      */
 52     var startWatching = function (target) {
 53         activeElement = target;
 54         activeElementValue = target.value;
 55         activeElementValueProp = Object.getOwnPropertyDescriptor(
 56             target.constructor.prototype, "value");
 57 
 58         Object.defineProperty(activeElement, "value", newValueProp);
 59         activeElement.attachEvent("onpropertychange", handlePropertyChange);
 60     };
 61 
 62     /**
 63      * (For old IE.) Removes the event listeners from the currently-tracked
 64      * element, if any exists.
 65      */
 66     var stopWatching = function () {
 67         if (!activeElement) return;
 68 
 69         // delete restores the original property definition
 70         delete activeElement.value;
 71         activeElement.detachEvent("onpropertychange", handlePropertyChange);
 72 
 73         activeElement = null;
 74         activeElementValue = null;
 75         activeElementValueProp = null;
 76     };
 77 
 78     /**
 79      * (For old IE.) Handles a propertychange event, sending a textChange event if
 80      * the value of the active element has changed.
 81      */
 82     var handlePropertyChange = function (nativeEvent) {
 83         if (nativeEvent.propertyName !== "value") return;
 84 
 85         var value = nativeEvent.srcElement.value;
 86         if (value === activeElementValue) return;
 87         activeElementValue = value;
 88 
 89         $(activeElement).trigger("textchange");
 90     };
 91 
 92     if (isInputSupported) {
 93         $(document)
 94             .on("input", function (e) {
 95                 // In modern browsers (i.e., not IE 8 or 9), the input event is
 96                 // exactly what we want so fall through here and trigger the
 97                 // event...
 98                 if (e.target.nodeName !== "TEXTAREA") {
 99                     // ...unless it's a textarea, in which case we don't fire an
100                     // event (so that we have consistency with our old-IE shim).
101                     $(e.target).trigger("textchange");
102                 }
103             });
104     } else {
105         $(document)
106             .on("focusin", function (e) {
107                 // In IE 8, we can capture almost all .value changes by adding a
108                 // propertychange handler and looking for events with propertyName
109                 // equal to 'value'.
110                 // In IE 9, propertychange fires for most input events but is buggy
111                 // and doesn't fire when text is deleted, but conveniently,
112                 // selectionchange appears to fire in all of the remaining cases so
113                 // we catch those and forward the event if the value has changed.
114                 // In either case, we don't want to call the event handler if the
115                 // value is changed from JS so we redefine a setter for `.value`
116                 // that updates our activeElementValue variable, allowing us to
117                 // ignore those changes.
118                 if (hasInputCapabilities(e.target)) {
119                     // stopWatching() should be a noop here but we call it just in
120                     // case we missed a blur event somehow.
121                     stopWatching();
122                     startWatching(e.target);
123                 }
124             })
125 
126             .on("focusout", function () {
127                 stopWatching();
128             })
129 
130             .on("selectionchange keyup keydown", function () {
131                 // On the selectionchange event, e.target is just document which
132                 // isn't helpful for us so just check activeElement instead.
133                 //
134                 // 90% of the time, keydown and keyup aren't necessary. IE 8 fails
135                 // to fire propertychange on the first input event after setting
136                 // `value` from a script and fires only keydown, keypress, keyup.
137                 // Catching keyup usually gets it and catching keydown lets us fire
138                 // an event for the first keystroke if user does a key repeat
139                 // (it'll be a little delayed: right before the second keystroke).
140                 // Other input methods (e.g., paste) seem to fire selectionchange
141                 // normally.
142                 if (activeElement && activeElement.value !== activeElementValue) {
143                     activeElementValue = activeElement.value;
144                     $(activeElement).trigger("textchange");
145                 }
146             });
147     }
148 
149 })(jQuery);
150 
151 (function ($) {
152     //document.write('<script type="text/javascript" src="/content/common/js/modules/jquerySplendidTextchange.js">');
153     document.write('<style>' +
154         ' .bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:100;max-height:220px;overflow-x:hidden;overflow-y:auto; }' +
155         '.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}' +
156         '.bigautocomplete-layout table tr:nth-child(odd){background:none repeat scroll 0 0 #fbf6f6;}' +
157         '.bigautocomplete-layout table tr:nth-child(even){background:none repeat scroll 0 0 #FFFFFF;}' +
158         '.bigautocomplete-layout table tr td{border-top: 1px solid #EAEAEA;border-left: 1px solid #EAEAEA;text-align:center;padding:0 5px;}' +
159         '.bigautocomplete-layout table tr td:nth-child(1){border-left: 0px;}' +
160         '.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}' +
161         '.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}' +
162         '</style>');
163 
164     var bigAutocomplete = new function () {
165         
166         this.currentInputText = null; //目前獲得游標的輸入框（解決一個頁面多個輸入框綁定自動補全功能）
167         this.functionalKeyArray = [
168             9, 20, 13, 16, 17, 18, 91, 92, 93, 45, 36, 33, 34, 35, 37, 39, 112, 113, 114, 115, 116, 117, 118, 119, 120,
169             121, 122, 123, 144, 19, 145, 40, 38, 27
170         ]; //鍵盤上功能鍵鍵值數組
171         this.holdText = null; //輸入框中原始輸入的內容
172         var queryData = []; //數據集合
173         //初始化插入自動補全div，併在document註冊mousedown，點擊非div區域隱藏div
174         this.init = function() {
175             queryData = [];
176             $("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
177             //$("#" + _input_id).blur(function () {
178             //    bigAutocomplete.hideAutocomplete();
179             //});
180             
181             $(document).bind('mousedown',
182                 function(event) {
183                     var $target = $(event.target);
184                     if ((!($target.parents().andSelf().is('#bigAutocompleteContent'))) &&
185                         (!$target.is(bigAutocomplete.currentInputText))) {
186                         bigAutocomplete.hideAutocomplete();
187                     }
188                 });
189 
190             //滑鼠懸停時選中當前行
191             $("#bigAutocompleteContent").delegate("tr",
192                 "mouseover",
193                 function () {
194                     mate = "1";
195                     $("#bigAutocompleteContent tr").removeClass("ct");
196                     $(this).addClass("ct");
197                 }).delegate("tr",
198                 "mouseout",
199                 function() {
200                     $("#bigAutocompleteContent tr").removeClass("ct");
201                 });
202 
203 
204             //單擊選中行後，選中行內容設置到輸入框中，並執行callback函數
205             $("#bigAutocompleteContent").delegate("tr",
206                 "click",
207                 function (tr) {
208                     mate = "1";
209                     hintfun();
210                     //bigAutocomplete.currentInputText.val($(this).find("div:last").html());
211                     //onDataSelected($(this).find("div:last").html());
212                     var data = [];
213                     var tdthis = $("td", $(this)[0]);
214                     for (var i = 0; i < $(tdthis).length; i++) {
215                         data.push($(tdthis[i]).text());
216                     }
217                     onDataSelected(data);
218                     //var callback_ = bigAutocomplete.currentInputText.data("config").callback;
219                     var callback_ = bigAutocomplete.currentInputText;
220                     if ($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)) {
221                         
222                         callback_(data);
223 
224                     }
225                     chuangetext = "";
226 
227                     bigAutocomplete.hideAutocomplete();
228                 });
229 
230         }
231 
232         //提示方法
233         function hintfun() {
234             //if (mate == "0"&&_required==true) {
235             //    bigAutocomplete.hideAutocomplete();
236             //    if (mate == "0") {
237             //        //$("#" + _input_id).val("");
238             //        //$("#" + _input_id).parent().find("span").html("請從智能提示中選擇！");
239             //        //$("#" + _input_id).parent().find("span").html("<span class='hintSpan'></span>");
240             //        if ($("#" + _input_id).parent().find("span").hasClass("beHint")==false)
241             //        {