Material Design Autocomplete search feature in Angular 2

I'm encountering some challenges with autocomplete in Angular2 Material Design. Here are the issues I'm facing:

1. When I type a character that matches what I'm searching for, it doesn't display in the autocomplete dropdown as shown in the images below:

  1. Before typing in the search box.
  2. After typing in the search box.

2. Another problem is that when I select an item from the user list, it shows [object Object] and I'm not sure why. See the images below:

  1. Before selecting an employee from the list.
  2. After selecting an employee from the list.

Please review my code below to see if there's anything I've missed:

Angular Code: new-useraccount-components.ts 

// Angular code goes here

AppModule: app.module.ts

// AppModule code goes here

As a beginner exploring this new framework, I would appreciate any guidance on resolving these issues. Thank you and have a great day!

javascriptjqueryangulartypescript

Answer №1

If you take a closer look at the documentation, you will find clear instructions:

One important section to pay attention to is "Setting separate control and display values". The reason your search result is not displaying correctly may be because you are trying to show something different from what you have specified in the [value].

Another issue you may encounter is that when you select an item from the list, the actual value of that item gets inserted into the search box. Given that this is a userAccount, instead of the username, it might display as [object Object].

By simply changing to [value]="userAccount.username", you might be able to resolve both issues. If that doesn't work as expected, refer to the documentation's explanation on using the [displayWith] attribute for further guidance.

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

Selecting the first li element using JQuery selectors

Can anyone help me with creating an onclick event that triggers when the user clicks on the first list item which is labeled as "Any Date"? I am looking to use jQuery to target this specific element. <ul id="ui-id-1" class="ui-menu ui-widget ui-widge ...

javascriptjqueryhtmlcssjquery-ui

Has anyone else encountered the issue where the JavaScript for Bootstrap version 4.3.1 is malfunctioning on Firefox version 65.0.1?

While browsing through the bootstrap v 4.3.1 documentation on firefox v 65.0.1, I noticed an issue with the javascript not functioning properly. For instance, the carousel component is not progressing to the next slide with its transition animation as it s ...

javascriptfirefoxbootstrap-4

Toggling in JS does not alter the DIV element

I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is ColdFusion AJAX compatible with CF7 or only works on CF9?

Seeking assistance with a simple CFC that functions locally on CF9 but encounters issues on CF7, as it lacks the returnformat attribute in cffunction. How can I resolve this? I attempted to use SerializeJSON() on the returned struct without success. Any su ...

jqueryajaxcoldfusioncoldfusion-9coldfusion-7

Step-by-step guide on positioning an image to show at the bottom of a div

I am trying to create a div that covers 100% of the screen height, with a table at the top and white space below it for an image. However, when I add the image, it ends up directly under the table instead of at the bottom of the DIV. I have searched on G ...

javascriptjquerycss

Difficulty with reloading the Metasearch page using Rails and JQuery

Currently, I am utilizing metasearch. My setup involves a form with checkboxes that trigger a submission and page reload each time one is changed. An issue has arisen where Jquery loses track of the checkbox state, resulting in certain content remaining h ...

jqueryruby-on-railsrubyruby-on-rails-3

What is the best way to include an API key in the response to an Angular client application?

I'm working on transferring my API key from NodeJS to an Angular client application using $http, but I am unclear on the approach. Below is a snippet from my NodeJS file: // http://api.openweathermap.org/data/2.5/weather var express = require(' ...

javascriptangularjsnode.jsexpress

Dependencies in Angular

After diving into Angular recently, I've been grasping the concepts well. However, one thing that still puzzles me is dependency injection. I'm unsure whether it's necessary to declare all components of my application (services, controllers ...

javascriptangularjsdependency-injection

Encountered an npm install error: The package does not meet the peerDependencies requirements of its siblings

When I try to execute the npm install command, it throws these errors: npm ERR! peerinvalid The package @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b3bfa2b590e7fee2fee1e5">[email protected]</a> does ...

angularnpmdependencies

The tablet is having trouble playing the mp3 audio file

When clicking on an mp3 audio file, I want the previous file to continue playing along with the new one. While this works perfectly on browsers with Windows machines, there seems to be an issue when using a tablet. The second mp3 stops playing when I clic ...

javascriptphpjquerytablet

Angular: Attempting to coordinate communication between two functions within my service

I have two separate functions but I would like them to sync up and work together. The first function is called getRandomNumbers - its role is to display a random number between 1 and 20 every second. The second function is up - it's a button that al ...

angular

Access the data within a jsonArray using Cypress

I'm dealing with a test.json file that contains a jsonArray [{ "EMAIL": "email_1", "FIRST_NAME": "Daniel" }, [{ "EMAIL": "email_2", "FIRST_NAME": "John" }] ] I'm trying to figure out how to use cypre ...

javascripttypescriptui-automationcypressweb-frontend

Implementing dotenv in a Node JS package

I'm in the process of developing a Node application that retrieves search results through a Google Custom Search Engine (CSE). To streamline the process, I plan to extract the component responsible for sending requests to Google and receiving the res ...

javascriptnode.jsnpmnode-modules

Most effective method to retrieve yesterday's data

Currently, I'm working on a requirement and I need to validate the logic that I've implemented. Can someone help me with this? The task at hand is to calculate the 1 month, 3 month, and 6 month return percentages of a stock price from the curren ...

javascriptangularjsnode.jslogicconcept

Checking phone number on a React.js form

I am currently working on a front-end application and need to implement form validation. I am relatively new to ReactJS and learning as I go along in the development process. One of the input fields requires a phone number, which should only accept number ...

javascriptreactjsformsvalidation

"Add a +1/Like/Share feature to enhance the user experience of your mobile web

In the process of developing a web-based mobile application with jQuery Mobile. Looking to incorporate buttons for "+1" and "Share" (for Google+) as well as "Like" and "Share" (for Facebook), but each button utilizes a popup window which goes against crea ...

jqueryhtmlfacebookjquery-mobilegoogle-plus

Issue with jQuery draggable appendTo functionality not functioning as expected

Below is the code snippet: JavaScript jQuery $('.dragBox').draggable({ axis: 'y', appendTo: 'parent', containment: [0,0,0,150], start: function() { $(this).addClass('grab ...

jqueryhtmlcssdraggable

Issues with jQuery AJAX functionality

I am in the process of incorporating some ajax functionality into my php website. I have a good understanding of jQuery, but for some reason, the value returned is always empty when I try to alert() it. Below is the code snippet that I am using: PHP: if( ...

javascriptphpjqueryajax

JavaScript preloader function isn't functioning properly when paired with a button

I'm currently working on developing a preliminary landing page for my game using JavaScript. I have integrated a class that overlays my main content, and added an 'onclick' function named fadeOut() for my button in JavaScript. However, the f ...

javascripthtmlcss

Access information from a different component within the route hierarchy

Suppose you have three components named A, B, and C with the following routing direction: A -> B -> C To retrieve data from the previous component (going from C to get data from B), you can use the following lines of code: In Component C: private ...

angulartypescriptangular7angular-activatedroute