I am using typeahead.js for creating a bit more specific autocomplete form field. It has to work dynamically so I used "remote" option, but I need to implement something like this: That field have to fire dropdown menu automatically on click in to it, if the size of resultset of prefetched data is less then 10. If not it has to work default as autocomplete field for minLength 3 letters. How to implement all theese reqiurements?
What I have done is this:
$('#client-select').typeahead({
name: 'users',
prefetch: "URL?query=''",
remote: 'URL?query=%QUERY',
template: [
'<p class="autocomplete-name">{{surname}} {{name}}</p>',
'<div>' +
'<span class="autocomplete-city">{{city}}</span>' +
'<span class="autocomplete-dateofbirth">{{dateOfBirth}}</span>' +
'</div>'
].join(''),
engine: Hogan,
limit: 10,
minLength: 3
});
Related
Usecase
There are a total of 200000 records exist in my database, if i load all the option in one time the page is not loading at all, it is saying maximum transaction time crossed (i felt like its the worst approach).
I thought of loading the selectize options based on keyword search, i will show the 50 records close to the search keyword.
I implemented the search in backend(Serverside), it is returning the data correctly to the client but i'm not finding a way to show them as options in html.
Please find my code below:
$scope.$selectUser = $('#selectUser').selectize({
valueField: 'sys_id',
labelField: 'name',
maxItems: c.data.maxteam,
placeholder:"Enter names or select below",
create: false,
load: function (query, callback) {
if (!query.length) return callback();
$scope.data.funcName = 'getUsers';
$scope.data.searchQuery = query;
$scope.data.kudosTo = [];
//Server call happens here
c.server.update().then(function(){
//Search data coming fine in this variable
var results = c.data.activeUsers;
//??? AT this step i'm not what to do to appear the data as selectize options and select from them ??
callback(results);
});
},
render: {
option: function (item, escape) {
return '<div class="option">' +
'<div class="text">' +
'<span class="name">' + escape(item.name) +"<i class='fa fa-circle circleFont'></i>"+ escape(item.user_name) + '</span>' +
'</div>' +
'</div>';
}
},
});
$scope.selectizeControlUser = $scope.$selectUser[0].selectize;
<div class="form-group text-left clearfix">
<select class="form-control" id="selectUser" multiple></select>
</div>
Search data coming fine in client code:
Issue: Selectize options are not showing in the HTML view
Expected results: Options should come like below image
I figure it out myself.
Options are appending to the options but just not showing in the view.
I added searchField and it started working fine as expected.
searchField: ['name', 'email', 'user_name'],
How would I go about updating an array that is carrying my ng-model after a button click? I cannot bind them because the data I am selecting from is a list. For the data to update I have to change views or refresh but I would like it to update after I click the button
Here is my HTML and where I would like my ng-model text updated
'<span>HVACs: <ct-input disabled="true" ng-model="data.groupLimits[activeIndex].devices" </ct-input> </span>' + '<br>' +
'<span> Add/Remove Device: <ct-input-list list="hvacsList" ng-model="model" </ct-input-list>' + '</span>' +
+ '<ct-button text="Add Device" show="true" ng-click="addDevice()"> </ct-button>'
If the array is loaded initially from a controller method call, just call that method at the end of whatever you are doing, eg
in controller:
$scope.LoadModel = function(){
myService.loadModel(id).then(function(d){
bindArrayToModel();
})
}
$scope.DoClick=function(){
// something
$scope.LoadModel(); // re-load model here
}
in view:
I can't figure out how to do what's supposed to be very simple.
I have 10 columns in my UI grid, they are all editable. My objective is dynamically "disable" or have them be "required" inputs, depending on the options of a scope object.
The object:
$scope.columnOptions = {
'column1': 'MANDATORY',
'column2': 'DISABLED'....
}
The cell templates
cellTemplate: '<input ng-disabled="{{ grid.appScope.columnOptions.column1=== \'DISABLED\' }}" ' +
'ng-required="{{ grid.appScope.columnOptions.column1=== \'MANDATORY\' }}" ' +
'data-ng-model="row.entity.column1" style="width:95%">'
This works if the object exists upon initialization.
The problem is that when I change the value of columnOptions, the rows don't get updated.
I have tried different ui-grid APIs to reload my template but it did not work:
$scope.gridApi.core.refresh();
$scope.gridApi.core.raise.reloadData();
$scope.gridApi.core.refreshRows();
$scope.gridApi.core.notifyDataChange('all');
I've added a plunker: http://plnkr.co/edit/3bIrtJuwHNrTeltIPAXw?p=preview
Your cell templates are not correct:
cellTemplate: '<input ng-disabled="grid.appScope.columnOptions.column1=== \'DISABLED\'" ' +
'ng-required="grid.appScope.columnOptions.column1=== \'MANDATORY\' " ' +
'data-ng-model="row.entity.column1" style="width:95%">'
You do not use {{}} within ng- related syntax as it already parses it as angular:
Fixed Plnkr here
I would like to know whether is there a way to program populate my kendo checkbox list like the image below through javascript object/array because most of the online search result are creating a list at html.
sample of output
If you already have the checkbox list rendered, then use MVVM checked binding:
http://demos.telerik.com/kendo-ui/mvvm/elements
http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked
If you want to render the checkbox list with JavaScript, according to some data, and check the checkboxes at the same time, then use Kendo UI templates and kendo.render()
http://docs.telerik.com/kendo-ui/framework/templates/overview
http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-render
<ul id="checkboxList"></ul>
<script>
var template = kendo.template("<li>" +
"<label>" +
"<input type='checkbox' #: isChecked ? \" checked='checked'\" : \"\" # />" +
"#: name #" +
"</label>" +
"</li>");
var data = [
{ id: 1, name: "foo", isChecked: true },
{ id: 2, name: "bar", isChecked: false }
];
var html = kendo.render(template, data);
$("#checkboxList").html(html);
</script>
Instead of kendo.render(), you can alternatively use a Kendo UI ListView and an item template. The template definition itself can be the same.
http://demos.telerik.com/kendo-ui/listview/index
http://docs.telerik.com/kendo-ui/api/javascript/ui/listview#configuration-template
I am trying to add a search box inside select elements. I am using angular-formly library along with angular-formly-material for material design. I am trying to achieve something similar to angular-material select box as shown in pick a vegetable example
ISSUE
I am able to see the search box but I cannot type into that box. Hence filtering does not work. I have no idea where to put some controller code as described in example.
CODE
formlyConfig.setType({
name: 'select',
template: '<md-input-container>'
+'<label for="{{id + \'_\'+ $index}}">'
+' {{to.label}}'
+' </label>'
+ '<md-select ng-model="model[options.key]"'
+ 'md-on-close="clearSearchTerm()"'
+ 'data-md-container-class="selectdemoSelectHeader"'
+ '>'
+'<md-select-header class="demo-select-header">'
+'<input ng-model="searchTerm"'
+'type="search"'
+'placeholder="Search"'
+'class="demo-header-searchbox md-text">'
+'</md-select-header>'
+'<md-optgroup >'
+'<md-option ng-value="option[to.valueProp || \'value\']" ng-repeat="option in to.options |'
+'filter:searchTerm">{{option[to.labelProp || \'name\'] }}</md-option>'
+'</md-optgroup>'
+'</md-select>'
+'</md-input-container>'
});
I found the solution. I was trying to add a controller to fix this but that was not working. To make this work, I used the link option in formly. Here is the working code.
formlyConfig.setType({
name: 'select',
template: '<md-input-container>'
+'<label for="{{id + \'_\'+ $index}}">'
+' {{to.label}}'
+' </label>'
+ '<md-select ng-model="model[options.key]"'
+ 'md-on-close="clearSearchTerm()"'
+ 'data-md-container-class="selectdemoSelectHeader"'
+ '>'
+'<md-select-header class="demo-select-header">'
+'<input ng-model="searchTerm"'
+'type="search"'
+'placeholder="Search"'
+'class="demo-header-searchbox md-text">'
+'</md-select-header>'
+'<md-optgroup >'
+'<md-option ng-value="option[to.valueProp || \'value\']" ng-repeat="option in to.options |'
+'filter:searchTerm">{{option[to.labelProp || \'name\'] }}</md-option>'
+'</md-optgroup>'
+'</md-select>'
+'</md-input-container>'
,
link: function(scope, el, attrs) {
el.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
}
});
Formly, Angular, Mat-select, Filtering
This answer for users, who still search answer (now the question watched over 1k). It's solution for Material UI. Hope this help someone.
What you need to do:
create custom type (that is really flexible solution)
provide and import it in app.module
don't use <mat-form-field></mat-form-field> wrapper
use ngx-mat-select-search package or your input for searching into select.
More details in my repo.