custom search widget for typeahead

rref #5374

app/shared/templates/typeahead.html

@@ -4,21 +4,8 @@
         {{form.title}}
     </label>
 
-    <!--<div class="form-group input-group">-->
-            <!--<span class="input-group-btn">-->
-                <!--<button class="btn btn-default dropdown-toggle" type="button"-->
-                        <!--data-toggle="dropdown">-->
-                    <!--<span class="caret"></span>-->
-                <!--</button>-->
-                <!--<ul class="dropdown-menu">-->
-                    <!--<li class="text-center" ng-if="form.gettingTitleMap"><a><span class="loader"></span></a></li>-->
-                    <!--<li ng-repeat="item in form.titleMap">-->
-                        <!--<a ng-click="form.onDropdownSelect(item, form.name)">{{item-->
-                            <!--.name}}</a>-->
-                    <!--</li>-->
-                <!--</ul>-->
-            <!--</span>-->
-        <input type="text"
+    <input ng-if="form.widget!=='custom'"
+           type="text"
            autocomplete="off"
            ng-model="$$value$$"
            uib-typeahead="item as item.name for item in form.titleMap"
@@ -32,7 +19,23 @@
            class="form-control {{form.fieldHtmlClass}}"
            schema-validate="form"
            name="{{form.name}}"/>
-    <!--</div>-->
+
+    <input ng-if="form.widget==='custom'"
+           type="text"
+           autocomplete="off"
+           ng-model="$$value$$"
+           uib-typeahead="item as item.name for item in getTitleMap($viewValue)"
+           typeahead-wait-ms="500"
+           typeahead-loading="loadingTitleMap"
+           typeahead-on-select="form.onDropdownSelect($item, form.name)"
+           placeholder="{{form.title}}"
+           ng-model-options="form.ngModelOptions"
+           ng-disabled="form.readonly"
+           sf-changed="form"
+           class="form-control {{form.fieldHtmlClass}}"
+           schema-validate="form"
+           name="{{form.name}}"/>
+
     <div ng-show="loadingTitleMap" class="loader"></div>
     <div class="help-block" sf-message="form.description"></div>
 </div>
\ No newline at end of file

app/zetalib/form_service.js

@@ -773,6 +773,35 @@ angular.module('ulakbus.formService', ['ui.bootstrap'])
                             }
                         };
                         v.type = 'string';
+                    },
+                    custom: function (scope, v, k) {
+                        scope.form[scope.form.indexOf(k)] = {
+                            type: "template",
+                            title: v.title,
+                            getTitleMap: function (viewValue) {
+                                // v.view is where that value will looked up
+                                var searchData = {
+                                    "url": v.wf,
+                                    "wf": v.wf,
+                                    "view": v.view,
+                                    "query": viewValue
+                                };
+                                generator.get_list(searchData).then(function (res) {
+                                    // response must be in titleMap format
+                                    return res;
+                                });
+                            },
+                            templateUrl: "shared/templates/typeahead.html",
+                            name: k,
+                            key: k,
+                            onDropdownSelect: function (item, inputname) {
+                                scope.model[k] = item.value;
+                                $timeout(function () {
+                                    document.querySelector('input[name=' + inputname + ']').value = item.name;
+                                });
+                            }
+                        };
+                        v.type = 'string';
                     }
                 },
                 text_general: {