[dropdown] force selection on search mode

Author: budiadiono

demo/src/docs/decorators/form/basic/view.pug

@@ -3,8 +3,8 @@ div
   ui-input(label='Last Name', placeholder='Please enter last name', v-model='lastName')
   ui-input(label='Email', placeholder='Please enter email address', v-model='email')
   ui-input(label='Street Address', placeholder='Please enter street address', v-model='street')
-  ui-dropdown(label='Country', v-model='country', placeholder='Please enter country')
-    ui-dropdown-item(v-for='c in countries', :value='c') {{c.name}}
+  ui-dropdown(label='Country', v-model='country', placeholder='Please enter country', :search="true")
+    ui-dropdown-item(v-for='c in countries', :value='c.id') {{c.name}}
   ui-numeric(label='Age', v-model='age', :integer='true')
   ui-date(label='Date of birth', v-model='dob')
   ui-currency(label='Salary', v-model='salary')

dist/vue-typed-ui.js

@@ -1459,6 +1459,8 @@ var Dropdown = function (_DropdownBase2) {
     }, {
         key: 'mounted',
         value: function mounted() {
+            var _this2 = this;
+
             var self = this;
             var el = this.$el.querySelector('.ui.dropdown');
             // search ?
@@ -1491,6 +1493,21 @@ var Dropdown = function (_DropdownBase2) {
                     self.selectedItems.splice(self.selectedItems.indexOf(val), 1);
                 }
             });
+            // manual force selection
+            $(this.$el).find('input.search').on('blur', function (e) {
+                var text = $(e.target).val();
+                if (text) {
+                    text = text.trim().toUpperCase();
+                    var val = _this2.sui('get value');
+                    $(_this2.$el).find('.menu').children('.item').each(function (i, el) {
+                        if (el.textContent.trim().toUpperCase().startsWith(text)) {
+                            val = $(el).data('value');
+                        }
+                    });
+                    _this2.sui('set selected', val);
+                    $(e.target).val('');
+                }
+            });
             // make up data validate attr
             Util.setDataValidateAttr(this, $(this.$el).find('input'));
             // assign selected values

src/components/form-inputs/dropdown/index.ts

@@ -15,7 +15,7 @@ export class Dropdown extends _DropdownBase {
 
 		if (this.css)
 			css += ' ' + this.css
-		
+
 		return ch('div', { 'class': css }, [
 			ch('input', { attrs: { type: 'hidden', name: this.name } }),
 			ch('i', { 'class': 'dropdown icon' }),
@@ -66,6 +66,24 @@ export class Dropdown extends _DropdownBase {
 		});
 
 
+		// manual force selection
+		$(this.$el).find('input.search').on('blur', (e) => {
+			let text = $(e.target).val()
+			if (text) {
+				text = text.trim().toUpperCase()
+				let val = this.sui('get value')
+
+				$(this.$el).find('.menu').children('.item').each(function (i, el) {
+					if (el.textContent.trim().toUpperCase().startsWith(text)) {
+						val = $(el).data('value')
+					}
+				})
+
+				this.sui('set selected', val)
+				$(e.target).val('')
+			}
+		})
+
 		// make up data validate attr
 		Util.setDataValidateAttr(this, $(this.$el).find('input'))
 
@@ -81,7 +99,7 @@ export class Dropdown extends _DropdownBase {
 			el.addClass('disabled')
 		else
 			el.removeClass('disabled')
-		
+
 		this.sui('refresh')
 	}