I am working on an Angular application that uses uses bootstrap typeahead on a text box. When I click inside the textbox, all the values are displayed in a dropdown. I have over 1000 items to search through and there is a delay from when the users clicks inside the textbox and when they are able to type. How can I disable the values from popping up once the textbox is clicked? Here is my HTML code
<input id="filterValue1"
class="form-control input-sm" type="text"
ng-model="modalCriteria.filterValue1"
uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-min-length="0"
typeahead-editable="true"
>
If you want to wait until they actually start to enter a text value, and not just open it when they click on it, you can change the typeahead-min-length.
By default it is '1', which means it will only start looking for matches when '1' character has been entered into the input. So in this case, removing it completely will work for you.
<input id="filterValue1"
class="form-control input-sm" type="text"
ng-model="modalCriteria.filterValue1"
uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-editable="true">
Also, setting it to typeahead-min-length="2" will restrict it even more, since it will only start matching on 2 characters, dramatically filtering out a large dataset.
Related
I am trying to get typeahead into an existing project so Im assuming the problem is
I have the following
<pre>Model: {{entry.value | json}}</pre>
<input ng-show="entry.isToShow" class="form-control col-xs-12 " ng-model="entry.value" type="text" ng-required="entry.isRequired" uib-typeahead="name as dropitem.name for dropitem in entry.dropdownOptions | filter:$viewValue">
it shows the typeahead as Id expect but when I click on one or tab whilst one is highlighted, entry.value is not being populated as id expect and its staying blank - if I type something long enough that its not in the typeahead mode anymore and tab out it gets set (eg selecting Sam from the last it shows nothing, if I type "sanfsjdngjdskgs" and tab to another control it show "sanfsjdngjdskgs"
Any ideas?
Just change your input tag to below
<input ng-show="entry.isToShow" class="form-control col-xs-12 " ng-model="entry.value" type="text" ng-required="entry.isRequired" uib-typeahead="dropitem as dropitem.name for dropitem in entry.dropdownOptions | filter:$viewValue">
Note: i just changed name to dropitem in uib-typeahead attributes
Angular and Ionic Application
I have a form that has a lot of <select> elements, The form offers the user to select from a list or if the <option> = 'Other' then I show another <input> to enter the value. I then save the value to another ng-model.
<select data-ng-model="minor.tests.liveEarth"
name="minorTestLiveEarth"
required>
<option></option>
<option>>200</option>
<option>>299</option>
<option>>500</option>
<option>>1000</option>
<option>Other</option>
</select>
</label>
<label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'">
<span class="input-label">Please Specify</span>
<input type="text"
placeholder="live earth other"
ng-maxlength="10"
data-ng-model="minor.tests.liveEarthOther"
name="minorTestLiveEarthOther">
</label>
I originally used <datalist> but doesn't show up on iOS.
I assigned the liveEarthOther to the same as the <select> liveEarth but it has 'Other' assigned to the ng-model, which then the user has to delete the input value Other before entering their value.
I have looked for a combobox kind of control but haven't found one that works properly.
How could I make this into a directive or any thing suitable that could perform the renaming without the user having to delete the value.
I want to use this functionality many times in the application I am building.
You may have overcomplicated things by re-using the ngModel. If you change the value minor.tests.liveEarth you'll mess up your select because anything other than the given values will cause nothing to be selected. But if you don't change minor.tests.liveEarth then you'll have to delete it when the user fills in the text input. This would then also mess up the select box!
What I would do is record the value of the text input to a different variable. Keep the ng-show="minor.tests.liveEarth === 'Other'" as it is, but change your input to
<input type="text"
placeholder="Fill in your other live earth"
ng-maxlength="10"
data-ng-model="tempVar" />
This way the input will be still be recorded, but the select won't be messed up on the ngModel change. Due to the placeholder, the user will know that they have to fill in the text box.
In your js, you'll have to create a validating function when the form is submitted along the lines of:
var validateLiveEarth = function(){
if(minor.tests.liveEarth === "Other"){
//check that tempVar meets validation
//assign tempVar to whatever form you're sending
}
}
I'm using the getbootstrap typeahead to populate an input value. I've setup everything so that the user has to pick something from this list:
<input type="text" class="form-control" id="birdname" ng-model="birdname" required ng-disabled="checked" autocomplete="off" placeholder="Check the box if you don't know!"
uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" typeahead-no-results="noResults"
uib-tooltip="Pick a bird or check the box if unsure!"
tooltip-placement="top-right"
tooltip-trigger="mouseenter"
tooltip-enable="!birdname">
</div>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found - Please Try Again!
</div>
As you can see, the user has to pick something from this list or the validation won't allow it, though I am having one issue: If the user starts typing and is typing a birdname that exists (list showing with birds on input), but then clicks out of the input with his mouse. typeahead accepts this as 'correct' even though the full name hasn't been picked.
Is there a fix to this?
If you didn't understand what I mean, the following picture should hopefully explain it:
Is there a solution to this? For example, it picking the first option in the list when clicked?
I have an input which uses typeahead but the placeholder is not being rendered. What should I do to make it show the placeholder?
I'm using "angular-bootstrap": "~0.14.0"
<input type="text" name="scheduler_name"
ng-model="appointment.scheduler_name" uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
typeahead-loading="loadingSchedulers" typeahead-no-results="noResults"
typeahead-on-select="setSchedulerAttributes($item, $model, $label)" class="form-control input-lg"
placeholder="(Name, Carrier, Broker or Phone)" server-error>
Screenshot:
I'd recommend stripping down your typeahead to see where the problem lies. Start with the barebones typeahead:
<input type="text" name="scheduler_name" ng-model="appointment.scheduler_name"
placeholder="(Name, Carrier, Broker or Phone)"
uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
See if the placeholder displays as it should. If not check to make sure you actually have a falsy value for the ng-model value.
If it does display then chances are some of the other typeahead-related directives are overwriting it. My best guess is that typeahead-no-results="noResults" or something related is triggering and causing it to set the placeholder to "".
I have a typeahead input. The input text is set to the option selected on the typeahead. However, I want to clear this text and display the "placeholder" value again on the text box after I select one of the options from typeahead (because I add the selected value to another div in the selectMatch() method.
<input id="searchTextBoxId" type="text"
ng-model="asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(asyncSelected)" typeahead-min-length="3"
typeahead-wait-ms="500">
I tried to set the text value and the placeholder value of the Input element using its Id but that did not work, such as these:
// the input text was still the
$('#searchTextBoxId').attr('placeholder', 'HELLO');
selected result
// the input text was still the selected result
$('#searchTextBoxId').val('');
How can I set or reset the text value ?
I was looking for an answer to this as well, for the longest time. I finally found a resolution that worked for me.
I ended up setting the NgModel to an empty string within the typeahead-on-select attribute:
In your typeahead-on-select attribute add asyncSelected = ''; behind your select function, like so:
<input ...
typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';" />
Making your final typeahead looking something like:
<input id="searchTextBoxId" type="text"
ng-model="asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(asyncSelected); asyncSelected = '';"
typeahead-min-length="3"
typeahead-wait-ms="500">
Fiddle adding each selection to an array
Actually this problem is not from typeahead. It is common issue about ng-model, scope and dot notation.
Refer
Scope inheritance in Angular
At your situation, you just change the model name like as xx.selected with dot-notation and set xx.selected empty in typeahead-on-select callback.
To set or reset the value, wouldn't you access the ng-model value, which is asyncSelected according to your code? In a controller:
$scope.asyncSelected = '';
#Asok's answer is fine if you need to immediately clear the value, but for myself, and perhaps others who come here based on the question title, #hey's answer may be better (if terse).
I changed the typeahead as follows:
<input id="searchTextBoxId" type="text"
ng-model="myNewVar.asyncSelected" placeholder="Search addresses..."
typeahead="address for address in getLocation($viewValue) | filter:$viewValue"
typeahead-loading="loadingLocations" class="form-control"
typeahead-on-select="selectMatch(myNewVar.asyncSelected)" typeahead-min-length="3"
typeahead-wait-ms="500">
then, whenever i need to clear the input from my controller, i can call
$scope.myNewVar.asyncSelected = '';
I was already doing as jnthnjns's answer suggested and setting the ng-model's value to an empty string, but the selection popup was not going away because I was (intentionally) using typeahead-min-length="0" so that users could easily see the choices.
It wasn't until I noticed that hitting enter to make a selection actually dismissed the box and it was only on clicks that the box remained. Digging into the ui-typeahead code I saw
// return focus to the input element if a match was selected via a mouse click event
// use timeout to avoid $rootScope:inprog error
if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
$timeout(function() { element[0].focus(); }, 0, false);
}
As soon as I set typeahead-focus-on-select="false" then the box dismisses immediately upon selection (and clearing of the model). It seems obvious now, but I had seen that option before but had read it as automatically selecting on focus (or something like that). Putting this as an answer, just in case it helps someone else.