Create a custom autocomplete feature using AngularJS from scratch

I am currently working on creating my own search function with auto-complete functionality.

Search MAC:<br/>
<input type="text" ng-model="boxtext">

<tr ng-repeat="box in boxes | filter:boxtext">
  <td>{{box.type}}</td>
  <td>{{box.mac}}</td>
  <td>{{box.serial}}</td>
 </tr>
</table>

Currently, all rows from "boxes" are being printed out and then filtered when I start typing in the text field. This is causing some issues for me.

I am struggling to figure out how to print out only the rows from "boxes" that match what I have typed into the text field. Any suggestions or advice would be greatly appreciated!

javascriptangularjsautocomplete

Answer №1

To implement conditional rendering in the preview table, you can utilize the ng-if directive:

<input type="text" ng-model="boxtext">

<table ng-if="boxtetxt.length > 0">
 <tr ng-repeat="box in boxes | filter:boxtext">
  <td>{{box.type}}</td>
  <td>{{box.mac}}</td>
  <td>{{box.serial}}</td>
 </tr>
</table>

With this setup, the table will only be displayed when boxtext.length > 0 is true. It's important to initialize boxtext as an empty string to ensure it has a valid length and is not null or undefined.

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

jQuery - Navbar with both horizontal and vertical orientation

I'm new to JavaScript and jQuery, and I'm looking to create a vertical nav/slider that follows the cursor when hovering over horizontal navbars links to reveal sub-links, essentially creating a dropdown menu effect. While I don't expect any ...

javascriptjqueryhtmlcss

Retrieve the height of an element containing images, even if the images have not finished loading

After making an Ajax call and inserting some HTML code, I require the height of the newly added div in the Ajax callback. However, the issue arises because the HTML from the Ajax call contains elements like images that need to be loaded first. I have crea ...

javascriptjqueryajax

What is the process for triggering the default state in ui-router?

I am currently utilizing ui-router version 0.2.18 The main referral admin URL for my website appears as http://example.com/partners/dashboard. I aim to modify it to http://example.com/partners/dashboard#referral-link in order to activate the corresponding ...

angularjsangular-ui-router

Is it possible to manipulate the position of a Three.js model using a

Currently, I am reviewing the three.js documentation and have come across the controls section. I have noticed that orbit can be used to control the camera's view of the scene, and I have verified that it is compatible with touchscreens. However, one ...

javascriptthree.js

Encountering a series of frustrating 404 errors when attempting to submit a React form multiple times

I've been working on developing a new forum using Express and React, but I'm facing challenges with saving form data to the database. Currently, my goal is to store topic titles in a MongoDB collection, with plans to expand to include message con ...

javascriptreactjsexpress

"Creating the Perfect Parallax Effect: A Step-by-Step

Seeking to implement a responsive parallax effect on my website, I have the following structure: <section id="first"> <div class="text fixed" > <h1><b>aSs</b> lorem ipsum dolor sit amet</h1> <p> ...

javascriptjquerycsshtmlparallax

Proper usage of a method within another method in a Vue component

Currently, I am extracting GPS data from an image using exifjs. My objective is to convert the latitude and longitude variables into a decimal variable as illustrated below: <template lang="html"> <div class="upload-wrap"> <button cla ...

javascriptvue.jsvuejs2

Creating dynamic and fluid motion with Bezier curves on canvas

I am currently working on creating a line that spans across the canvas from left to right. In these early stages of development, I am using a step-by-step animation approach with the following function: timer = window.setInterval(draw_line, 30); Here is ...

javascriptjqueryhtmlcanvas

Sending PHP arrays to JavaScript using AJAX

My array is being displayed as a list instead of a javascript array. How can I resolve this issue? I tried using JSON.parse as suggested in another answer, but it did not work. Below is the javascript code: var data = { "action": "test" ...

javascriptphpajaxjson

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...

javascripthtmlcssvue.jsvuejs2

AngularJS 2: Updating variable in parent component using Router

My current app.component looks like the following: import { Component, Input } from '@angular/core'; import {AuthTokenService} from './auth-token.service'; @Component({ selector: 'app-root', templateUrl: './app ...

javascriptangulartypescript

Utilize Jquery to calculate the total sum of values associated with a particular key in a JSON object based on input

I am facing an issue with my script where I am trying to sum up the clientPrice keys in a JSON object assigned to a form text element. Here is what I have: <input id="clientList" type="hidden" value="[{"clientID":"1","clientType":"0","clientPrice":"450 ...

javascriptjqueryjson

An HTML attribute with a blank value will not display the equals sign operator

jQuery can be used like this: $select.append('<option value="">All</option>'); This code appears to insert the element in HTML as follows: <option value>All</option> However, what is intended is to append the elemen ...

javascriptjqueryhtml

How can I create text in Three.js that passes through an object?

Subject: I am trying to achieve the effect of perspective 3D text passing through another object in the scene. The background of the text should be transparent. https://i.sstatic.net/1m0Ca.jpg Bonus question: How can I animate the text like a ticker? I ...

javascriptthree.js3d

Experience seamless transitions with Material UI when toggling a single button click

When looking at the examples in the Material UI Transitions documentation, I noticed that there are cases where a button triggers a transition. In my scenario, I have a button that triggers a state change and I want the previous data to transition out befo ...

javascriptmaterial-uitransition

When using Node.js, React.js does not recognize raw HTML strings as valid HTML elements

I successfully sent raw HTML from node.js to react, but when I try to render it, the content is displayed as a raw string instead of HTML elements. This is how I retrieve the string in the front-end: componentDidMount() { this.callApi() .then( ...

javascriptnode.jsmongodbreactjsexpress

AngularJS has encountered an undefined form within its scope

In my main JavaScript file, I have a collection of functions that are used throughout my application. This JS file also handles the routing of the app. main.js (MainController): $stateProvider .state('page1', { url : '/&apo ...

javascriptangularjsformsionic-frameworkroutes

The React Functional Component undergoes exponential re-renders when there is a change in the array

I'm encountering a problem with one of my functional components. Essentially, it maintains an array of messages in the state; when a new message is received from the server, the state should update by adding that new message to the array. The issue ar ...

javascriptarraysreactjstypescript

Vue click event does not function when used with an anchor tag containing an href attribute

Looking for a way to create an anchor tag that executes a click handler instead of following the href attribute when clicked. Currently working with Vue 1 and my code is as follows: <div v-if="!hasPage(category.code)"> <div> <templat ...

javascripthtmlvue.jsseo

Transform the JSON response from MongoDB into a formatted string

var db = mongoose.connection; const FoundWarning = db.collection('warning').find({UserID: Warned.user.id, guildID: message.guild.id}).toArray(function(err, results) { console.log(results); }) I have been attempting to ...

javascriptnode.jsmongodbdiscord.js