Filtering Typeahead results based on multiple fields in Angular

My typeahead feature currently filters based on a person's name only. However, my person object contains additional fields such as surname, and I would like the filter to work based on both name and surname.

Here is the existing typeahead code using angular-ui-bootstrap:

<input type="text" id="friendInput" placeholder="Friend's name"
 typeahead="friend for friend in friendsList | filter:{name:$viewValue}"
 typeahead-template-url="friendDropdown.html" ng-model="chosenFriend" />

I have attempted to modify the filter section of the typeahead attribute without success. Can you provide guidance on how to achieve this correctly?

javascriptangularjsangular-ui-bootstrap

Answer №1

If you want to filter a list of friends in AngularJS, you can easily achieve this by declaring a filter in your scope.

<input type="text" id="friendInput" placeholder="Friend's name"
  typeahead="friend for friend in friendsList | filter:nameFilter"
  typeahead-template-url="friendDropdown.html" ng-model="chosenFriend" />

In your controller, make sure to declare the following:

$scope.nameFilter = function(friend) {
    var regex = new RegExp('' + $scope.chosenFriend, 'i');
    return regex.test(friend.name) || regex.test(friend.surname); // Filter based on name or surname
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an issue with an Uncaught SyntaxError: Unexpected identifier

I've been attempting to send data through ajax but keep encountering errors. Here's the code I have: jQuery.ajax({ url : '', type: 'POST', ...

javascriptjqueryajax

Having trouble retrieving values from my EXPRESS / NodeJs response error message: [String: 'Error: Request resulted in an error code: 404'

I have been attempting to retrieve values from my express response error. When I use console.log on the error like so... app.use(function(err, req, res, next){ console.log(err) }); The content displayed in the console is as follows: [String: 'E ...

javascriptnode.jsexpress

Sending multiple variables to an onClick function using Javascript and AJAX

I'm currently facing a challenge in sending multiple variables as parameters to a function called redi on an onClick event. Right now, I am only able to send one variable (id) and struggling to find a way to pass multiple variables (specifically id, n ...

javascriptajaxparametersquotes

Creating a Dynamic Login Panel Using HTML, CSS, and Jquery

Designing a dynamic sliding login panel utilizing Html, CSS, and jquery alongside various plugins. Check it out here: http://24.125.42.135/ When activated, the bar smoothly pushes down the content (click on the login option at the top right corner). This ...

javascriptjqueryhtmlcss

Utilizing Angular: Filtering Views Based on JSON Data Values

I am struggling to figure out why a basic Angular filter is not working for me in this example. Despite following the recommended format I found online, it does not seem to be functioning properly. Essentially, I just need to display information from the a ...

javascriptangularjsjsonfilter

Revise Bootstrap accordion setup

I currently have a Bootstrap accordion set up on my website using Bootstrap 4.1.0 <div id="accordion" class="mt-3"> <div class="card"> <div class="card-header bg-dark text-white" id="headingOne"> <h5 class="mb-0 f ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

When utilizing Angular JS routing on localhost, the URL displays the filename

I am currently working on a website in Visual Studio 2010, using Angular and HTML code. When I debug the website in IE, the routing is functioning properly but the URL displays the file name "index.html" and "#" sign, like this: http://localhost:1349/D ...

angularjsrouteslocation-provider

Error: Firebase has encountered a network AuthError, which could be due to a timeout, interrupted connection, or an unreachable host. Please try again later. (auth/network-request-failed

I have set up my Angular app to utilize Firebase's emulators by following the instructions provided in this helpful guide. In my app.module.ts, I made the necessary configurations as shown below: import { USE_EMULATOR as USE_AUTH_EMULATOR } from &apos ...

javascriptangularfirebase-authenticationfirebase-tools

I am interested in generating a Stacked Chart in Google Charts using data from a JSON file

Hey there, I'm looking to generate a stacked chart using JSON data in Google Charts. My current challenge revolves around the code snippet var data = google.visualization.arrayToDataTable([. <?php $tmp = array(); require "configdashboard.php"; /* ...

javascriptphpmysqljsonstacked-chart

What are the steps to make React JSX direct to "/profile" and display the profile page?

Throughout my application, I have integrated reach router to facilitate navigation between the different pages. However, I came across a navbar component that I really like and decided to add it to my app. Strangely, clicking on the "to: "/profi ...

javascriptreactjsnavigation

Generating Unique Random Numbers with JavaScript

Is there a way to generate 5 unique random lottery numbers using JavaScript? I've been working on the code below, but can't seem to figure out how to ensure there are no duplicate numbers in the final selection. I tried adding conditionals and lo ...

javascriptrandomduplicatesnumbers

Incorporate External Web Page Information by Clicking a Button

Apologies if this question has already been asked, but despite my efforts to explore the available resources, I have not found a solution to my issue. I currently have an input field where users can enter their website, keyword, or industry. When they cli ...

javascriptjqueryhtmliframe

Refine your search by name following the implementation of a character-altering filter

Encountered a scenario in which there is a need to filter elements generated by the 'ng-repeat' directive. I have implemented a custom filter that replaces one character with another and vice versa for each element created. However, when attempt ...

javascripthtmlangularjs

What is the reason border property does not transition effectively?

I am trying to remove the border property after a certain period of time (1 second) and make it smooth. Here is what I have attempted: var elem = $('div').css({'border-top':'6px solid #FC9A24', 'border-le ...

javascriptjqueryhtmlcss

Unable to retrieve button value with material-ui package

My task requires me to retrieve the value of a button, as it contains an ID essential for further steps. Initially, I used a standard button with Bootstrap styling and everything functioned correctly. <button value={row.vacationRequestID} c ...

javascriptreactjsmaterial-ui

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

I am working on creating a switch button with CSS and JavaScript that needs an animation when toggling or clicked. The only issue I am facing is related to the animation. I am wondering if there might be any problem with the positioning (relative, absol ...

javascripthtmlcss

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

javascripthtmlcss

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

javascriptjqueryhtmlcssfirefox

Checking the existence of a user's email in Node.js

Hey there! I am new here and currently learning Node.js with Express. I'm trying to find a way to check if a user's email already exists in the database. Here is what I have so far: const emailExists = user.findOne({ email: req.body.email }); if ...

javascriptnode.jsexpressbackend

What is the reason for having getDerivedStateFromProps as a static method?

Currently, I haven't started working on the static getDerivedStateFromProps method, so I am looking to gain more insight about it. I am aware that React has deprecated componentWillReceiveProps in React v16+ and introduced a new lifecycle method call ...

javascriptreactjsreact-native