I am using the AngularJS typeahead directive to iterate over an array of objects which has been populated before-hand by an API, so that the typeahead is pulling all information from memory.
I would like that when the input gains focus, the typeahead is shown with all available results, even when there is no value in the input.
I found this simple JSFiddle for a typeahead that we can use to test with.
I've tried using:
<input typeahead-min-length="0" class="form-control input-sm" ng-model="query" typeahead="warehouse.info for warehouse in warehouses | filter:$viewValue" typeahead-on-select="selectedWarehouse = $item;" ng-keypress="fetchWarehouses();"/>
..thinking that the attribute typeahead-min-length="0" could accomplish this, but it didn't.
Any ideas? Thanks!
Related
I am currently having trouble clearing the text inside of an input type="text" tag in my application. I have been able to clear the inputs of all fields by setting the necessary observable (knockout.js) to the default value, but with this input I can not find a way to do so.
The input tag I need to clear in the .cshtml file:
<input type="text" placeholder="Search for Users…" id="users" class="form-control" data-bind="autoComplete: Users, value: SelectedFilteredUser, optionsText: 'DisplayName', optionsValue: 'Value',autoCompleteOptions: {autoFocus: false}" />
I have tried my usual knockout.js approach of setting the observable's value to a default value:
self.SelectedFilteredUser(null); and self.SelectedFilteredUser("");
NOTE: self.SelectedFilteredUser(null); does set the value inside of the input to null as seen when I click it's associated add button I created, but the text is still inside the input tag. This is what I have used to clear my other inputs but it has not worked here surprisingly.
After looking over numerous StackOverflow posts such as this one, I have tried other solutions such as,
With jQuery: $('#users').val(''); and normal JavaScript access to the element: document.getElementById('users').value='';
These both have no effect at all.
If anyone has any idea how I can clear this input type="text" tag in my .cshtml file, it would be very appreciated.
I'm working on a project in which I would like to populate a selectbox with all the cities of a certain country. The array I get from my db is about 2800 records long. When Angular renders this selectbox it takes pretty long although the data is ready for rendering very fast.
Here is my html code:
<div class="form-group">
<label for="city">City</label>
<select type="text" id="city" class="form-control" ngModel name="city" required [ngModel]="user?.city.zipcode">
<option *ngFor="let city of cities" value="{{city.zipcode}}">{{city.cityName}}</option>
</select>
</div>
I tried to get it to speed up using virtual scrolling but I'm not finding very good examples in how to use this with selectboxes and this also doesn't fix the rendering lag caused by the 2-way binding. Does anyone have a solution for this which I can follow. I'm still a junior in Angular so any help is more than welcome.
Thanks for you're time and effort in advance!
I have a form with fields that are dependent on each other, displayed using UI Bootstrap. Selecting a team from a bootstrap typeahead then populates a list of players that can then be selected in a second typeahead. When the user changes the team I reload the list of players and clear the currently selected player value.
The player options are loaded correctly based on the team, but the issue is that the typeahead is not showing the options when clicked on - I think I might be running afoul of the $viewValue being in a weird state and not matching any of the existing options. If I type a letter that happens to match one of my unseen choices then I get the matching values, and clearing anything that has been typed restores the full list.
I would like the full list to be available on the first click - I suspect I need to reset the $viewValue properly, and I have toyed with trying $setViewValue and $render() on the player model, but have not gotten anywhere.
<div class="options">
Team: <input type="text"
name="team"
placeholder="Select team"
ng-model="selectedTeam"
uib-typeahead="team as team.name for team in league | filter:$viewValue"
typeahead-editable="false"
typeahead-min-length="0"
class="form-control">
</div>
<div class="options">
<input type="text"
name="player"
placeholder="Select player"
ng-model="selectedPlayer"
uib-typeahead="player as player.name for player in players | filter:$viewValue"
typeahead-editable="false"
typeahead-min-length="0"
class="form-control">
</div>
The controller that looks for a team change and then resets the player options and selected value:
$scope.$watch('selectedTeam.id', function(newTeamID) {
// clears any currently selected player ng-model
$scope.selectedPlayer = null;
if (!newTeamID)
{
return;
}
// sets up the list of available players
$scope.pullPlayers(newTeamID);
});
Full plunkr is available here.
To reset players typeahead value from controller you might want something like this:
$scope.$watch('selectedTeam.id', function(newTeamID) {
if (!newTeamID)
{
$scope.players = [];
$scope.teamForm.player.$setViewValue('');
$scope.teamForm.player.$render();
return;
}
// sets up the list of available players
$scope.pullPlayers(newTeamID);
});
Here is a forked plunker
Now I am working in an search functionality module using angularjs, search functionality is implemented by multiple select options, user can select more than one option in select tag, it's not a problem, but I am facing issue to load the saved search details into the select tag,(have to show pre-selected search data into the select tag)
<select name="" ng-model="sex" multiple ng-options="sex.name as sex.name for sex in choosesex">
</select>
which displays the list like Male and Female like below,
$scope.choosesex = [{ID:1,name:"Male"},
{ID:2,name:"Female"}];
I have get the json response from saved search, while pushing the result into the ng-model it doesnot show the selected option in select tag, Please share your opinions regarding this issue to fix. Thanks in advance.
sex.name as sex.name is not right. Try this:
<select name="" ng-model="sex" multiple ng-options="sex as sex.name for sex in choosesex"></select>
I'm using AngularJS typeahead, I made an autocomplete input with it, using custom templates (to add the photo and the name of the person that I'm typing) and it's working fine.
<input ng-model="data.friend"
typeahead="recipient as recipient.Name for recipient in loadStudents($viewValue)"
typeahead-template-url="/Content/js/inbox/partials/typeaheadTemplate.html"
typeahead-wait-ms="300"
typeahead-editable="false"
typeahead-min-length="1"
type="text" class="col_100 input radius2x transition boxsizing"
auto-focus />
But now I need it to be for more than one person, which means a tag-like system.
How can I do that with Angular typeahead?