angular4x-auto-complete-multi/bundles/angular4x-auto-complete-multi.umd.min.js

Remote autocomple for andular 4, 5, 6. Setup the url and field names of database which value will show in list, Multiple fiels can be set by comma separator. The data format of return value of remote url should be JSON. After start typing i

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common/http"),require("@angular/common")):"function"==typeof define&&define.amd?define("angular4x-auto-complete-multi",["exports","@angular/core","@angular/common/http","@angular/common"],t):t(e["angular4x-auto-complete-multi"]={},e.ng.core,e.ng.common.http,e.ng.common)}(this,function(e,t,r,i){"use strict";var o=function(){function e(e,t){this.http=e,this.renderer=t,this.all_list_child=[],this.selected_row=[],this.selected_row_obj={},this._loading="hidden"}return e.prototype.setting=function(e){this.data_url=e.data_url,this.db_fields=e.db_fields},e.prototype.clickout=function(){this._clearList()},e.prototype.getData=function(e){var u=this,t=e.target.value;if(0!=t.length){var r=this.data_url+"?q="+t;this._loading="visible",this.http.get(r).subscribe(function(p){u._clearList();var o,e=function(e){for(var t=u.renderer.createElement("div"),r=u.db_fields.split(","),c="",i=0;i<r.length;i++)c+=p[e][r[i]]+" ";c=c.trim(),u.renderer.appendChild(t,u.renderer.createText(c)),u.all_list_child.push(t),u.renderer.listen(t,"click",function(e){var t=Array.from(e.target.parentNode.children).indexOf(e.target),r=p[t].id;try{for(var i=function(e){var t="function"==typeof Symbol&&e[Symbol.iterator],r=0;return t?t.call(e):{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}}}(u.selected_row),o=i.next();!o.done;o=i.next()){if(o.value.id==r)return void(u.text_fld.nativeElement.value="")}}catch(s){n={error:s}}finally{try{o&&!o.done&&(l=i["return"])&&l.call(i)}finally{if(n)throw n.error}}u.selected_row_obj[c]=p[t];var n,l,a=u.renderer.createElement("div"),d=u.renderer.createElement("div");u.renderer.appendChild(d,u.renderer.createText("x")),u.renderer.addClass(d,"remove_div"),u.renderer.setAttribute(d,"id",c+"_elem_autocomp"),u.renderer.addClass(a,"selected_div"),u.renderer.appendChild(a,d),u.renderer.appendChild(a,u.renderer.createText(e.target.innerHTML)),u.renderer.listen(d,"click",function(e){var t=e.target.id.split("_")[0];delete u.selected_row_obj[t],u.renderer.removeChild(u.list_div.nativeElement,e.target.parentNode)}),u.text_fld.nativeElement.value="",u.renderer.appendChild(u.list_div.nativeElement,a)}),u.renderer.appendChild(u.list.nativeElement,t),o=u.text_fld.nativeElement.parentElement.offsetHeight,u.renderer.setStyle(u.list.nativeElement,"top",o+"px"),u.renderer.setStyle(u.list.nativeElement,"display","block"),u.renderer.addClass(t,"ngxautocomp_list_el")};for(var t in p)e(t);u._loading="hidden"})}else this._clearList()},e.prototype._clearList=function(){for(var e=0;e<this.all_list_child.length;e++)this.renderer.removeChild(this.list.nativeElement,this.all_list_child[e]);this.all_list_child=[],this.renderer.setStyle(this.list.nativeElement,"display","none")},e.prototype.getSelectedRow=function(){var e=0;for(var t in this.selected_row=[],this.selected_row_obj)this.selected_row[e++]=this.selected_row_obj[t];return JSON.stringify(this.selected_row)},e.decorators=[{type:t.Component,args:[{selector:"angula4x-auto-complete",template:'\n<div class="ngxautocomplete">\n  <div #_ng_autocomp_selected_list class="list_container"></div>\n  <input type="text" value="" name="ngx-autocomplete_field" (keyup)="getData($event)" #_ng_autocomp_txt>\n  <div #_ng_autocom_list class="ngx-auto-list"></div>\n  <i class="fa fa-cog fa-spin" [style.visibility]="_loading" ></i>\n</div>',styles:[":focus{outline:0}.ngxautocomplete{position:relative;width:100%;border:1px solid #ccc}.ngxautocomplete .list_container{width:100%;float:left}.ngxautocomplete input{border:0;width:90%}.ngx-auto-list{display:none;position:absolute;width:100%;min-height:300px;overflow-y:scroll;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;top:0;background:#fff;z-index:99}.ngxautocomp_list_el{text-align:left;cursor:pointer;padding:5px}.ngxautocomp_list_el:hover{background-color:#ccc}.ngxautocomplete .selected_div{background-color:#d0e1ec;border:1px solid #d0e1ec;border-radius:10px;padding:5px;margin:3px;width:auto;float:left}.ngxautocomplete .selected_div .remove_div{cursor:pointer;margin-left:4px;border:1px solid #7c7a7a;padding:0 2px 5px;color:#2c2b2b;text-align:center;font-size:13px;line-height:17px;border-radius:100px;width:14px;height:14px;background:#fff;float:right;font-family:Arial,Helvetica,sans-serif}.ngxautocomplete .selected_div .remove_div:hover{color:#ec0606;border:1px solid #ec0606}"]}]}],e.ctorParameters=function(){return[{type:r.HttpClient},{type:t.Renderer2}]},e.propDecorators={list:[{type:t.ViewChild,args:["_ng_autocom_list"]}],text_fld:[{type:t.ViewChild,args:["_ng_autocomp_txt"]}],list_div:[{type:t.ViewChild,args:["_ng_autocomp_selected_list"]}],clickout:[{type:t.HostListener,args:["document:click"]}]},e}(),n=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],declarations:[o],exports:[o]}]}],e}();e.Angular4xAutoCompleteModule=n,e.ɵa=o,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular4x-auto-complete-multi.umd.min.js.map