zhongrj
2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d
public/map/controls/searchbox/SearchBox.js
New file
@@ -0,0 +1,289 @@
/**
 * infoWindow的template
 * @author Liuyl
 * @date 2015/11/9
 */
define([
   "base/BaseControl", "base/AppEvent",
   "dojo",
   "dojo/_base/declare",
   "dojo/_base/array",
   "dojo/text!controls/searchbox/SearchBox.html",
   "dojo/_base/lang",
   "dojo/_base/connect",
   "dojo/query",
   "dojo/dom-construct",
   "dojo/dom-style",
   "dojo/dom-attr",
   "dojo/dom-geometry",
   "dojo/on",
   "dojo/dom-class",
   "dojo/domReady!"
], function(
   BaseControl, AppEvent,
   dojo,
   declare,
   arrayUtil,
   template,
   lang,
   connect,
   query,
   domConstruct,
   domStyle,
   domAttr,
   domGeometry,
   on,
   domClass
) {
   var Widget = declare("SearchBox", [BaseControl], {
      templateString: template,
      baseClass: "searchbox",
      constructor: function(options, srcRefNode) {
         this.currentKeyword = null;
         if (!this.suggestCount)
            this.suggestCount = 10;
         this.currentStart = 0;
         this.currentCount = 0;
         this.mouseOverSuggest = false;
      },
      getInputValue: function() {
         return this.inputTextDom.value.trim();
      },
      startup: function() {
         on(this.inputButton, "click", lang.hitch(this, function(evt) {
            var value = this.getInputValue();
            if (value) {
               AppEvent.dispatchAppEvent(AppEvent.SEARCHBOX_QUERY, {
                  hockId: this.id,
                  type: "search",
                  args: {
                     keyword: value,
                  }
               });
            }
            this.hideSuggest();
         }));
         on(this.inputClearDom, "click", lang.hitch(this, function(evt) {
            this.clear();
            AppEvent.dispatchAppEvent(AppEvent.SEARCHBOX_QUERY, {
               hockId: this.id,
               type: "clear"
            });
         }));
         on(this.inputTextDom, "input", lang.hitch(this, function(evt) {
            var value = this.getInputValue();
            domStyle.set(this.inputClearDom, "display", "block");
            if (!value) {
               domStyle.set(this.inputClearDom, "display", "none");
               this.hideSuggest();
            } else if (this._checkChanged(value, 0)) {
               this.querySuggest(value, 0);
            }
            this.currentKeyword = value;
            AppEvent.dispatchAppEvent(AppEvent.SEARCHBOX_QUERY, {
               hockId: this.id,
               type: "input",
               args: {
                  keyword: value,
               }
            });
         }));
         on(this.inputTextDom, "keypress", lang.hitch(this, function(evt) {
            if (evt.keyCode == 13) {
               var value = this.getInputValue();
               if (value) {
                  AppEvent.dispatchAppEvent(AppEvent.SEARCHBOX_QUERY, {
                     hockId: this.id,
                     type: "search",
                     args: {
                        keyword: value,
                     }
                  });
               }
               this.hideSuggest();
            }
         }));
         on(this.inputTextDom, "focus", lang.hitch(this, function(evt) {
            //点击菜单项有可能导致触发该事件,未知原因,relatedTarget为空时为正常触发
            if (evt.relatedTarget) {
               return;
            }
            var value = this.getInputValue();
            if (!value) {
               this.hideSuggest();
            } else if (this._checkChanged(value, 0)) {
               this.querySuggest(value, 0);
            } else if (this.currentCount) {
               this.showSuggest();
            }
            this.currentKeyword = value;
         }));
         on(this.inputTextDom, "blur", lang.hitch(this, function(evt) {
            if (!this.mouseOverSuggest)
               this.hideSuggest();
         }));
         this.suggestDom = domConstruct.create("div", {
            className: "searchbox-suggest-container",
            "data-searchbox": this.id,
            innerHTML: "<div class='searchbox-suggest' ><ul></ul></div>"
         }, document.body);
         this.suggestUlDom = query("ul", this.suggestDom)[0];
         on(this.suggestDom, "mouseover", lang.hitch(this, function(evt) {
            this.mouseOverSuggest = true;
         }));
         on(this.suggestDom, "mouseleave", lang.hitch(this, function(evt) {
            this.mouseOverSuggest = false;
         }));
         AppEvent.addAppEventListener(AppEvent.QUERY_SUCCESS, lang.hitch(this, function(evt) {
            if (evt.hockId == this.id) {
               this.updateSuggest(evt);
            }
         }));
         AppEvent.addAppEventListener(AppEvent.QUERY_ERROR, lang.hitch(this, function(evt) {
            if (evt.hockId == this.id) {
               this.updateSuggest(evt);
            }
         }));
         AppEvent.addAppEventListener(AppEvent.CHANGE_SEARCHBOX_STATE, lang.hitch(this, this.onChangeStateHandler));
         if (this.placeholder) {
            domAttr.set(this.inputTextDom, "placeholder", this.placeholder);
         }
         if (this.disableButton) {
            domStyle.set(this.inputButton, "display", "none");
         }
         this.inherited(arguments);
      },
      onChangeStateHandler: function(evt) {
         if (evt.hockId == this.id) {
            if (evt.type == "clear") {
               this.clear();
            } else if (evt.type == "update") {
               if (evt.data && evt.data.hasOwnProperty("keyword")) {
                  domAttr.set(this.inputTextDom, "value", evt.data.keyword.trim());
                  if (evt.data.keyword.trim()) {
                     domStyle.set(this.inputClearDom, "display", "block");
                  }
               }
            }
         }
      },
      postCreate: function() {
         this.inherited(arguments);
      },
      _checkChanged: function(keyword, start) {
         return !(this.currentKeyword == keyword && this.currentStart == start);
      },
      querySuggest: function(keyword, start) {
         if (!this.disableSuggest) {
            AppEvent.dispatchAppEvent(AppEvent.RUN_SMART_QUERY, {
               hockId: this.id,
               args: {
                  keyword: keyword,//encodeURIComponent(keyword),
                  start: start,
                  count: this.suggestCount
               }
            });
         }
      },
      updateSuggest: function(evt) {
         if (evt.error) {
            console.log(evt.error);
         }
         if (evt.result) {
            domConstruct.empty(this.suggestUlDom);
            if (evt.result.data.count)
               this.currentCount = parseInt(evt.result.data.count);
            else {
               this.currentCount = 0;
            }
            if (this.currentCount == 0) {
               this.hideSuggest();
            } else if (this.currentCount == 1) {
               this._buildSuggestItem(evt.result.data.items[0]||evt.result.data.items);
               this.showSuggest();
            } else {
               arrayUtil.forEach(evt.result.data.items, lang.hitch(this, function(item, index) {
                  this._buildSuggestItem(item);
               }));
               this.showSuggest();
            }
            return;
         }
         this.hideSuggest();
      },
      _buildSuggestItem: function(item) {
         var li = domConstruct.create("li", {
            innerHTML: "<a><i class='search'>" + item.name + "</i><em>" + item.adress + "</em></a>",
            className: "searchbox-suggest-item",
            "data-poi-id": item.id,
            "data-poi-type": item.poitype,
            "data-pac": item.pac
         }, this.suggestUlDom)
         on(li, "click", lang.hitch(this, function(evt) {
            var value = query("i", evt.currentTarget)[0].innerHTML;
            domAttr.set(this.inputTextDom, "value", value);
            var value = this.inputTextDom.value.trim();
            //            AppEvent.dispatchAppEvent(AppEvent.SEARCHBOX_QUERY, {
            //               hockId: this.id,
            //               type: "suggest",
            //               args: {
            //                  keyword: value,
            //                  poiId: domAttr.get(evt.currentTarget, "data-poi-id"),
            //                  poiName: domAttr.get(evt.currentTarget, "data-poi-type"),
            //                  pac: domAttr.get(evt.currentTarget, "data-pac")
            //               }
            //            });
            AppEvent.dispatchAppEvent(AppEvent.SEARCHBOX_QUERY, {
               hockId: this.id,
               type: "search",
               args: {
                  keyword: value,
                  poiType: null,
                  poiName: "全部"
               }
            });
            this.hideSuggest();
         }));
      },
      showSuggest: function() {
         if (!this.disableSuggest && $(this.inputDom).is(":visible")) {
            var pos = domGeometry.position(this.inputDom, true);
            domStyle.set(this.suggestDom, "left", pos.x + "px");
            domStyle.set(this.suggestDom, "top", pos.y + pos.h + "px");
            domStyle.set(this.suggestDom, "width", (pos.w - 14) + "px");
            domStyle.set(this.suggestDom, "display", "block");
         }
      },
      hideSuggest: function() {
         if (!this.disableSuggest) {
            domStyle.set(this.suggestDom, "display", "none");
         }
      },
      clear: function() {
         this.currentKeyword = null;
         this.currentStart = 0;
         this.currentCount = 0;
         this.mouseOverSuggest = false;
         domConstruct.empty(this.suggestUlDom);
         this.hideSuggest();
         domAttr.set(this.inputTextDom, "value", "");
         domStyle.set(this.inputClearDom, "display", "none");
      },
      show: function() {
         domStyle.set(this.domNode, "display", "block");
      },
      hide: function() {
         domStyle.set(this.domNode, "display", "none");
      }
   });
   return Widget;
});