https://turnkeyrealtysolutions.com/Widgets/KeywordSelector/Keyword…2e8lFlZfClodZQX_W3u8O_wGZMMXkCBTQxMNtnF3e9k

1Widgets.KeywordSelector = function (options = null) {
2    this.className = "defaultKeywordSelectorContainer";
3
4    Widgets.BaseWidget.call(this, "/Widgets/KeywordSelector/KeywordSelector", this.className);
5
6    BaseHelper.MergeIntoObject(this, options);
7
8    Widgets.BaseWidget.call(this, "/Widgets/KeywordSelector/KeywordSelector", this.className);
9
10    this._setup = function () {
11        Widgets.BaseWidget.prototype._setup.call(this);
12        this.currentKeywords = null;
13        this.selectedKeywords = [];
14        this.pendingKeywords = null;
15        this.onKeywordChange = null;
16    };
17
18    this.getLoadData = async function () {
19        let result = await Widgets.BaseWidget.prototype.getLoadData.call(this);
20        this.KeywordButtonMarkup = await BaseHelper.MakeAJAXGetRequest("/Widgets/KeywordSelector/KeywordButton");
21        this.SelectedKeywordButtonMarkup = await BaseHelper.MakeAJAXGetRequest("/Widgets/KeywordSelector/SelectedKeywordButton");
22        return result;
23    };
24
25    this.clear = () => {
26        this.selectedKeywords = [];
27        this.populateSelectedKeywords();
28    };
29
30    this.setPendingKeywords = (pendingKeywords) => {
31        this.pendingKeywords = pendingKeywords;
32    };
33
34    this.clearKeywordText = () => {
35        this.txtKeyword.value = "";
36    }
37    this.onPendingKeywords = null;
38
39    this.hasPendingKeywords = () => {
40
41        return this.pendingKeywords != null && this.pendingKeywords.length > 0;
42    };
43
44
45    this.getFeatureKeyword = (keyword)=>{
46      let result = null;
47      const upper = String(keyword).toUpperCase();
48      const index = upper.indexOf("FEATURES");
49
50      if (index !== -1 && index > 0) {
51        result = keyword.substring(0, index);
52      }
53
54      return result;
55    }
56
57    this.parseKeywords = (data) => {
58        let TagKeySet = new Set();
59        let TagValueSet = new Set();
60        let KeywordDict = {};
61        for(let key in data.idLookupKey){
62            TagKeySet.add(data.idLookupKey[key]);
63        }
64        for(let key in data.idLookupValue){
65            TagValueSet.add(data.idLookupValue[key]);
66        }
67        for(let tagValue of TagValueSet){
68            KeywordDict[tagValue.toLowerCase()] = tagValue;
69        }
70        for(let tagKey of TagKeySet){
71            let keyword = this.getFeatureKeyword(key);
72            if (keyword!=null){
73                KeywordDict[keyword.toLowerCase()] = keyword;
74            }
75        }
76        return {
77            idLookupKey:data.idLookupKey,
78            idLookupKey:data.idLookupKey,
79            TagKeySet:TagKeySet,
80            TagValueSet:TagValueSet,
81            KeywordDict:KeywordDict
82        }
83    };
84
85    this.setKeywords = (data) => {
86        let keywords = this.parseKeywords(data);
87        this.currentKeywords = keywords;
88        if (this.hasPendingKeywords()) {
89            this.pendingKeywords.forEach((keyword) => {
90                if (keyword!=null){
91                    keywordLower = keyword.toLowerCase();
92                    if (keywords.KeywordDict[keywordLower]!=null){
93                        let keyword = keywords.KeywordDict[keywordLower]
94                        this.selectedKeywords.push(keyword)
95                    }
96                }
97            });
98            this.populateSelectedKeywords();
99        }
100        this.pendingKeywords = null;
101    };
102
103    this.findKeywords = (input, top = 5) => {
104        if (this.currentKeywords == null) {
105            return [];
106        }
107        let result = [];
108        let keywordDict = this.currentKeywords.KeywordDict;
109        for (let keywordLower in keywordDict) {
110            let keyword = keywordDict[keywordLower];
111            if (keywordLower.startsWith(input.toLowerCase())) {
112                result.push(keyword);
113                if (result.length >= top) {
114                    break;
115                }
116            }
117        }
118        return result;
119    };
120
121    this.findSelectedKeyword = (keyword) => {
122        for (let i = 0; i < this.selectedKeywords.length; i++) {
123            let selectedKeyword = this.selectedKeywords[i];
124            if (selectedKeyword == keyword) {
125                return i;
126            }
127        }
128        return null;
129    };
130
131    this.removeSelectedKeyword = (keyword) => {
132        let removedTagGroup = null;
133        let i = this.findSelectedKeyword(keyword);
134        if (i != null) {
135            removedTagGroup = this.selectedKeywords.splice(i, 1);
136        }
137        return removedTagGroup;
138    };
139
140    this.createKeywordButton = (label) => {
141        let div = document.createElement("div");
142        div.innerHTML = this.KeywordButtonMarkup;
143        let keywordButton = div.querySelector(".KeywordButton");
144        let labelElement = keywordButton.querySelector(".label");
145        labelElement.innerText = label;
146        return {
147            div: keywordButton,
148            label: labelElement
149        }
150    }
151
152    this.createSelectedKeywordButton = (label) => {
153        let div = document.createElement("div");
154        div.innerHTML = this.SelectedKeywordButtonMarkup;
155        let keywordButton = div.querySelector(".SelectedKeywordButton");
156        let labelElement = keywordButton.querySelector(".label");
157        labelElement.innerText = label;
158        return {
159            div: keywordButton,
160            label: labelElement
161        }
162    }
163
164    this.setSuggestions = (keywordArr) => {
165        this.divKeywordSuggestion.innerHTML = "";
166        keywordArr.forEach((keyword) => {
167            let div = document.createElement("div");
168            let btn = this.createKeywordButton(keyword);
169            this.divKeywordSuggestion.appendChild(btn.div)
170            btn.div.addEventListener("click", (e) => {
171                if (this.findSelectedKeyword(keyword) == null) {
172                    this.selectedKeywords.push(keyword);
173                    this.populateSelectedKeywords();
174                }
175            });
176        });
177    };
178
179    this.populateSelectedKeywords = () => {
180        this.clearKeywordText();
181        this.divSelectedKeywords.innerHTML = "";
182        this.selectedKeywords.forEach((keyword) => {
183            let btn = this.createSelectedKeywordButton(keyword);
184            this.divSelectedKeywords.appendChild(btn.div);
185            btn.div.addEventListener("click", (e) => {
186                let removedTagGroup = this.removeSelectedKeyword(keyword);
187                if (removedTagGroup != null) {
188                    this.populateSelectedKeywords();
189                }
190            });
191        });
192        if (this.onKeywordChange != null) {
193            this.onKeywordChange(this.selectedKeywords);
194        }
195        if (this.onPendingKeywords != null) {
196            this.onPendingKeywords(this.selectedKeywords);
197            this.onPendingKeywords = null;
198        }
199    };
200
201    this.onTemplateLoad = function () {
202        this.txtKeyword = this.element.querySelector(".txtKeyword");
203        this.divKeywordSuggestion = this.element.querySelector(".keywordSuggestion");
204        this.divSelectedKeywords = this.element.querySelector(".selectedKeywords");
205        this.btnClear = this.element.querySelector(".btnClear");
206        this.btnClear.addEventListener("click", () => { this.clear() });
207        
208        this.txtKeyword.addEventListener("input", (e) => {
209            let keywordArr = this.findKeywords(this.txtKeyword.value);
210            this.setSuggestions(keywordArr);
211        });
212    };
213}
214Widgets.KeywordSelector.prototype = new Widgets.KeywordSelector();