The value selected is not being shown using uib-typeahead in the user interface

Question

The value selected is not being shown using uib-typeahead in the user interface

Within my AngularJS application, I am utilizing uib-typeahead to provide auto-suggestions in a text box. As I start typing, I can see the suggestions appearing. However, when I select one of the options, it does not display in the text field (ng-model).

I'm unsure whether the issue lies with the version of Bootstrap or Angular that I am using, or if there is an error in my code.

<input type="text" ng-model="selectedData" uib-typeahead="proDesc as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

Here is the link to view my code:

http://plnkr.co/edit/s4ol9bkrcb16QV2pAikA?p=preview

javascript angularjs twitter-bootstrap angular-ui-bootstrap

Answer 1

Answer №1

The issue you're facing is that the entire object is being assigned to the $viewValue of the input when you select an option, rather than just the description property of the object.

If you want to assign the $viewValue from the description instead:

<input type="text" ng-model="selectedData" uib-typeahead="proDesc as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

Change it to:

<input type="text" ng-model="selectedData" uib-typeahead="mydata.proDescription as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

Answer 2

The issue you're facing is that the entire object is being assigned to the $viewValue of the input when you select an option, rather than just the description property of the object.

If you want to assign the $viewValue from the description instead:

<input type="text" ng-model="selectedData" uib-typeahead="proDesc as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

Change it to:

<input type="text" ng-model="selectedData" uib-typeahead="mydata.proDescription as mydata.proDescription for mydata in dataList | filter:$viewValue | orderBy:orderByStartsWith($viewValue)"/>

Answer 3

Answer №2

While cnorthfield's solution may be effective for some, I encountered issues in my own project where it did not work as expected. As a result, I came up with an alternative approach:

<input type="text"
ng-model="selectedData"
typeahead-input-formatter="$model.proDescription "
    uib-typeahead="mydata as mydata.proDescription for mydata in dataList | filter:$viewValue" />

It is important to note that in this scenario, selectedData will initially be an object in the array when a user selects an item from the list but will become a string if the user only types into the input box. To handle this distinction, you may need to implement an additional event listener, such as ng-blur, and within the listener, verify the model using an if block like so:

if (typeof selectedData === 'string') {
    for (var i in dataList) {
        if (dataList[i].proDescription === selectedData) {
            // perform necessary actions here
        }
    }
}

This workaround should be considered as a contingency plan in case cnorthfield's solution does not meet your requirements.

Answer 4

While cnorthfield's solution may be effective for some, I encountered issues in my own project where it did not work as expected. As a result, I came up with an alternative approach:

<input type="text"
ng-model="selectedData"
typeahead-input-formatter="$model.proDescription "
    uib-typeahead="mydata as mydata.proDescription for mydata in dataList | filter:$viewValue" />

It is important to note that in this scenario, selectedData will initially be an object in the array when a user selects an item from the list but will become a string if the user only types into the input box. To handle this distinction, you may need to implement an additional event listener, such as ng-blur, and within the listener, verify the model using an if block like so:

if (typeof selectedData === 'string') {
    for (var i in dataList) {
        if (dataList[i].proDescription === selectedData) {
            // perform necessary actions here
        }
    }
}

This workaround should be considered as a contingency plan in case cnorthfield's solution does not meet your requirements.

The value selected is not being shown using uib-typeahead in the user interface

Answer №1

Answer №2

Similar questions

Customize date selection in Material UI React's DatePicker: A guide to formatting the date output

Gather information from a customizable Bootstrap table and store it in an array

What reasons underlie the existence of various methods for importing Modules in JavaScript?

Examining the performance of a React application through the use of Google Chrome

Exploring the World of Background Processes in Meteor

Removing a dynamic TypeScript object key was successful

Connecting a button's action to a specific element in an array using AJAX and Firebase

Triggering an Angular AJAX call by selecting a radio button

Creating a search field in Bootstrap 4 that emulates material design, facing challenges with transition animations

The list of items in a React Bootstrap Dropdown does not refresh when the state is changed

JQuery does not immediately update the input value

Issue with Bootstrap dropdown functionality when used within a Horizontal description block

What is the process for instructing Electron packager to utilize a personalized electron configuration file?

What is the proper way to implement a $scope.$watch for a two-dimensional array in AngularJS?

issues with updating a MongoDB collection

Determining the equation from a string and converting it to an integer

Applying Bootstrap's inline styling to adjust the width of a label

Obtain the targeted tab name in Angular

How do I go about showing every character on a separate line using a for loop?

Update JavaScript variable value when there is a change in the onchange