ANGULARJS implementation of the Select Drop-down box with lookup filtering function sample code _ANGULARJS

Objective

For the Drop-down list of select, such as the state to choose such a feature, the world so many countries, has been pulling a lot of hard, eyes to look for, tired! So in order to optimize the user experience, the Drop-down box with lookup function is very necessary. We all know jquery has such a plugin, but we use ANGULARJS, we prefer to use bidirectional binding, instructions to solve the problem gracefully.

Analysis

Our goal is<select ng-options="">to support the lookup feature by adding a new attribute to the original labelselect-search. If this property does not work, it does not affect the functionality of the original select.

Problem

1. In theselectSearchinstructions, how to obtain theng-optionsdata source in, and the specified value (option label value) and text (option tag text) field name.

2. What is the way to filter? Is whether to display a match each time, hide the mismatch or match each time from the data source, and regenerate the node.

Solving ideas

1. Refer to angular with instructionsng-optionsto get the data source andvaluethetextfield name. Special note, onlyng-options="obj.value as obj.text for obj in list"the common form of support, those with the grouping, etc., temporarily do not support Kazakhstan.

2. Regenerate nodes. (Why so choose, convenient!) ）

Concrete implementation

1. The Code section

1.1 JS Code (please introduce jquery first, otherwise it will be an error)

/** * with filter drop-down box * Use method <select ngc-select-search name= "Select1" ng-options= "" > * description [select must have Name,ng-optio NS Properties] */. Directive (' Ngcselectsearch ', function ($animate, $compile, $parse) {function parseoptions (Optionsexp, El Ement, scope) {//ngoptions, regular var ng_options_regexp =/^\s* ([\s\s]+?) (?:\ S+as\s+ ([\s\s]+?)]? (?:\ S+group\s+by\s+ ([\s\s]+?)]? (?:\ S+disable\s+when\s+ ([\s\s]+?)]? \s+for\s+ (?:( [\$\w] [\$\w]*) | (?:\ (\s* ([\$\w][\$\w]*) \s*,\s* ([\$\w][\$\w]*) \s*\))] \s+in\s+ ([\s\s]+?) (?:\ S+track\s+by\s+ ([\s\s]+?)]?

     $/;
     var match = Optionsexp.match (ng_options_regexp); if (!) ( Match) {Console.log (' ng-options expression is incorrect ')} var valuename = match[5] | |
     MATCH[7];
     var keyname = match[6];
     var displayfn = $parse (match[2]);
     var keyfn = $parse (match[1]);

     var VALUESFN = $parse (match[8]);
     var labelarray = [], IDArray = [], optionvalues = []; Scope. $watch (Match[8], function (NewValue, oldValue) {if (NEWvalue && newvalue.length > 0) {optionvalues = VALUESFN (scope) | |
         [];
         Labelarray = []; IDArray = [] for (var index = 0, L = optionvalues.length; index < L; index++) {var it = Optionvalu
           Es[index];
             if (match[2] && match[1]) {var localit = {};
             Localit[valuename] = it;
             var label = DISPLAYFN (scope, localit);
             var dataid = keyfn (scope, localit);
             Labelarray.push (label);
           Idarray.push (Dataid);
           } scope.options = {' optionvalues ': optionvalues, ' Labelarray ': Labelarray,
   ' IDArray ': IDArray}});
     Return {restrict: ' A ', require: [' Ngmodel '], priority:100, Replace:false, Scope:true, Template: ' <div class= "Chose-container" > ' + ' <div class= "Chose-single" ><span class= "J-view" &GT;&L T;/span><i class= "Glyphicon glyphicon-remove" ></i></div> ' + ' <div class= ' chose-drop chose-hide j-drop ' > '
       + ' <div class= ' chose-search ' > ' + ' <input class= ' j-key ' type= ' text ' autocomplete= ' off ' > ' + ' </div> ' + ' <ul class= ' chose-result ' > ' +//' <li ng-repeat= ' ' +repeattempl+ ' ' data-id= ' ' +key ' templ+ ' ">{{' + valuetempl+ '}}</li> ' + ' </ul> ' + ' </div> ' + ' </div> ', l Ink: {pre:function selectsearchprelink (scope, element, attr, ctrls) {var Tmplnode = $ (this.template). f

         Irst (); var modelname = Attr.ngmodel, name = Attr.name?
         Attr.name: (' Def ' +date.now ());

         TMPLNODE.ATTR (' id ', name + ' _chosecontianer ');
       $animate. Enter (Tmplnode, element.parent (), Element); }, Post:function Selectsearchpostlink (scope, element, attr, ctrls) {var chosenode = Element.next ();//$ (
' # ' +attr.name + ' _chosecontianer ');         Chosenode.addclass (Attr.class);
         Element.addclass (' chose-hide ');
         Currently selected var Ngmodelctrl = ctrls[0];

         if (!ngmodelctrl | |!attr.name) return;
         Parseoptions (attr.ngoptions, element, scope);

         var rs = {};
           function Setview () {var currentkey = Ngmodelctrl. $modelValue;
             if (isNaN (currentkey) | | |!currentkey) {currentkey = ';
             Chosenode.find ('. J-view:first '). Text (' please choose ');
           Chosenode.find (' i '). addclass (' chose-hide ');
               } if ((Currentkey + '). Length > 0) {for (var i = 0, L = rs.idArray.length; i < L; i++) {
                 if (rs.idarray[i] = = Currentkey) {chosenode.find ('. J-view:first '). Text (rs.labelarray[i));
                 Chosenode.find (' i '). Removeclass (' chose-hide ');
               Break function Setviewanddata () {if (!sco)}}}}Pe.options) {return;
           rs = scope.options;
         Setview ();
         Scope. $watchCollection (' Options ', setviewanddata);


         Scope. $watch (Attr.ngmodel, Setview);
           function Getlistnodes (value) {var nodes = [];
           Value = $.trim (value);
               for (var i = 0, L = rs.labelArray.length i < l; i++) {if (Rs.labelarray[i].indexof (value) >-1) {
           Nodes.push ($ (' <li> '). Data (' ID ', rs.idarray[i]). Text (Rs.labelarray[i])}}

         return nodes; Chosenode.on (' KeyUp ', '. J-key ', function () {//Search input box KeyUp, re-filter list var value = $ (this). val
           ();
           Chosenode.find (' Ul:first '). Empty (). Append (Getlistnodes (value));
         return false;
           ). On (' click ', Function () {Chosenode.find ('. J-drop '). Removeclass (' chose-hide ');
 if (Chosenode.find ('. J-view:first '). Text ()!= ' please choose ') {            Chosenode.find (' i '). Removeclass (' chose-hide ');
           } chosenode.find (' Ul:first '). Empty (). Append (Getlistnodes (Chosenode.find ('. J-key '). Val ());
         return false;
           (' Click ', ' Ul>li ', function () {var _this = $ (this);
           Ngmodelctrl. $setViewValue (_this.data (' id '));
           Ngmodelctrl. $render ();
           Chosenode.find ('. J-drop '). addclass (' chose-hide ');

         return false;
           ). On (' Click ', ' I ', function () {Ngmodelctrl. $setViewValue (");
           Ngmodelctrl. $render ();
           Chosenode.find ('. J-view:first '). Text (' please choose ');

         return false;
         });
           $ (document). On ("click", Function () {$ ('. J-drop '). addclass (' chose-hide ');
           Chosenode.find (' i '). addclass (' chose-hide ');
         return false;

       });
 }
     }
   }; })

1.2 CSS code (written in less, following compiled)

. chose-hide {position:absolute!important;
Top: -999em!important;
 }. chose-container {border:none!important;
 Float:left;
 margin-right:40px;
 Padding:0!important;
position:relative;
 }. Chose-container. chose-single {padding:6px 12px;
 Color: #333;
 width:100%;
 border:1px solid #eee;
 Display:inline-block;
height:30px;
 }. Chose-container. chose-single::after {content: ';
 Position:absolute;
 BORDER-WIDTH:6PX 3px;
 Border-style:solid; /* border-top-color:transparent;
 * * border-left-color:transparent;
 Border-right-color:transparent;
 Border-bottom-color:transparent;
 right:8px;
top:12px;
 }. Chose-container. chose-single I {width:12px;
 Float:right;
 right:8px;
 font-size:12px;
 height:12px;
Background-color: #eee;
 }. Chose-container. chose-drop {width:195px;
 Position:absolute;
 border:1px solid #eee;
 z-index:1000;
Background-color: #fff;
 }. Chose-container. Chose-search input[type= ' text '] {margin:0;
 padding-left:12px; Width:100%;
 height:30px;
 border:1px solid #ccc;
Float:none;
 }. Chose-container. chose-result {max-height:370px;
 OVERFLOW-Y: scroll;
Overflow-x: Hidden;
 }. Chose-container. chose-result li {padding:5px 12px;
List-style-type:none; }. Chose-container. Chose-result li:hover {background-color: #e1e2e7;}

Use and Effect

<select ngc-select-search class= "Common-select" ng-model= "aa.b" ng-options= "Obj.countryid as Obj.countryCnName for Obj in Vm.countries "name=" Country >
<option value= "" > Please select </option></select>

Detailed description

The key point in the program is theparseOptionsfunction, which is problem 1 in the previous analysis.parseOptionsis a reference tong-optionsthe source code to achieve, the original is to return an object, this object contains a data source, but in debugging, found inpostthe function of the function returned in the object of the data is empty,watchnot, so insteadscope.optionsto use to save data.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.