AngularJS dropdown menu for input selection binding

Hey there, I need some help with the code below:

<input type="text" class="form-controlb" ng-model="item.name" id="name" placeholder="Enter Name" /
>

Also, I have a dropdown as shown here:

                <div class="col-sm-12" ng-model="query">
                    <select ng-model="item" class="form-control" ng-options="a.name for a in addemployees | filter:name | orderBy:'name'" value="{{a.name}}">
                        <option value="">[Select Employee..]</option>

                    </select>
                </div>

I am trying to make it so that when I enter a name in the input box, if that name is in the dropdown options then it should show up as a selection. I have tried filtering by name and ordering by name, but nothing shows up in the dropdown. Can someone please advise on how to fix this issue? Thank you.

javascriptangularjsangularjs-directive

Answer №1

Here is a potential solution that you could try:

<input type="text" ng-model="text" />
<select ng-model="selectedOption" ng-options="option.name for option in options">
</select>

$scope.options = [{
  name: 'a',
  value: 'value-a'
}, {
  name: 'b',
  value: 'value-b'
}];

$scope.selectedOption = $scope.options[0];

$scope.$watch('text', function(v) {
  for (var i in $scope.options) {
    var option = $scope.options[i];
    if (option.name === v) {
      $scope.selectedOption = option;
      break;
    }
  }
});

http://plnkr.co/edit/Lj0p3wig9JfOM0UkpDrd

Answer №2

plank

Check out this example I've prepared for you -)

   <table>
    <tr>
        <td align="right">Search :</td>
        <td><input ng-model="query[queryBy]" /></td>
    </tr>           
    <tr>
        <td align="right">Search By :</td>
        <td>
            <select ng-model="queryBy">
                <option value="$"></option>
                <option value="name">NAME</option>
                <option value="company">COMPANY</option>
                <option value="designation">DESIGNATION</option>
            </select>   
        </td>
    </tr>
</table>

Here's an ng-repeat example:

            <tr>
            <tr ng-repeat="emp in employees | filter:query">
            <td>{{emp.name}}</td>
            <td>{{emp.company}}</td>
            <td>{{emp.designation}}</td>
        </tr>

JS code snippet:

angular.module('module3', [])
.controller('testCtrl3', function($scope){
$scope.query = {}
$scope.queryBy = '$'
$scope.items = [
  {
    "name" : "Ananchenko Juriy",
    "company" : "GOOGLE. Ltd",
    "designation" : "Creativ Director"
  },
  {
    "name" : "Ananchenko",
    "company" : "GOOGLE"
  },
  {
    "name" : "Korman Juriy",
    "company" : "GOOGLE. Ltd",
    "designation" : "stager na ispitatelnom sroke"
  }
];
$scope.orderProp="name";

End of JavaScript snippet. Enjoy coding!

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

Issue Detected: The function this.route.params.flatMap is not recognized

Seeking guidance on transitioning to id, or a similar concept that's hard to articulate. Upon clicking a button to navigate to a specific user, encountering the following error: ERROR TypeError: this.route.params.flatMap is not a function at UserSho ...

javascriptangular

The VueJS Chosen directive fails to refresh when new options are selected

Struggling to populate my jQuery Chosen dropdown field with AJAX data using VueJS. Unfortunately, when trying to update the values, the Chosen dropdown does not reflect the changes. I've experimented with different approaches, including manually trig ...

javascriptajaxvue.jsjquery-chosen

The PHP script is not receiving any data when checking if the value is set in the $_POST variable

I'm attempting to transmit values from a JavaScript file using POST method to a PHP page. Here is the AJAX code: let userInput = $input.val(); $.ajax({url: "../checkout/test.php", type : 'post', data : {'userInput': user ...

javascriptphpajaxpost

Update HTML page sections dynamically when there is a modification in the database table (specifically, when a new row

On my website, users can participate in betting activities. Whenever a user places a bet, a new entry is added to a mysql table. I am looking for a solution to refresh specific sections of the HTML page (not the entire page) whenever a user makes a bet (u ...

phpjquerymysqlangularjsnode.js

Ways to access information from doc.data()

<template> <div> {{ id }} {{ title }} </div> </template> <script> import { useRoute } from 'vue-router' import 'firebase/firebase-firestore' import { db } from '@/fdb' export default ...

javascriptfirebasevue.jsgoogle-cloud-firestore

What is the best way to reorganize an object's properties?

Looking for a way to rearrange the properties of an existing object? Here's an example: user = { 'a': 0, 'b': 1, 'c': 3, 'd': 4 } In this case, we want to rearrange it to look like this: user = { &a ...

javascriptjsonangular

how to use jquery to indicate that a checkbox is selected

click here to see the image $(document).ready(function() { $('.editbtn').on('click', function(){ $('#editmodal').modal('show'); $tr=$(this).closest('tr'); var da ...

javascriptphpjqueryarrays

Stop the continuous AJAX loop or look for an alternative method to retrieve and compare a list of HTML pages

I am in need of a solution to insert a small script onto all of my website pages. The script must include the correct token for each of the 21 different domains I have. However, not all the sites are directly under the 'domain name' but are consi ...

javascriptjqueryajax

Frontend experiencing issues with Laravel Echo Listener functionality

I have recently developed a new event: <?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Broadcasting\PresenceChannel; use Illuminate&bs ...

javascriptphplaravelsocket.iolaravel-echo

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

Transform a list of file directories into a JSON format using ReactJS

I am developing a function that can convert a list of paths into an object structure as illustrated below; this script will generate the desired output. Expected Output data = [ { "type": "folder", "name": "dir1& ...

javascriptreactjsjsonfile

Essential Understanding of HTML Query Strings Required

As a newcomer to the world of web design, I have taken on what seems like a challenging task for me: creating a webpage that can send a query string to the German Railway website (bahn.de) with the parameters I input. My question now is whether there is a ...

javascripthtmlstring

Tips on allowing the backend file (app.js) to handle any URL sent from the frontend

In my Express app, I have two files located in the root directory: index.js and index.html. Additionally, there is a folder named "server" which contains a file named app.js that listens on port 3000. When running index.html using Live Server on port 5500 ...

javascriptnode.jsexpress

Finding a JSON file within a subdirectory

I am trying to access a json file from the parent directory in a specific file setup: - files - commands - admin - ban.js <-- where I need the json data - command_info.json (Yes, this is for a discord.js bot) Within my ban.js file, I hav ...

javascriptnode.jsjson

Webpack in Vuejs does not have access to the keys defined in dev.env.js file

The framework utilized here is vuejs-webpack, with build and config files located here. No modifications have been made to these files. According to the information on Environment Variables, the keys specified in dev.env.js should be accessible during the ...

javascriptnode.jswebpackvue.jsenvironment-variables

Getting the value from a .sh (Shell Script) file in React: How to do it?

There is a .sh file that contains the following code: echo "Hello" This code produces the output: Hello The question at hand is: I am trying to extract the output from the .sh file and integrate it into my React application. After exploring various ...

javascriptnode.jsreactjssh

Inject $scope into ng-click to access its properties and methods efficiently

While I know this question has been asked before, my situation is a bit unique. <div ng-repeat="hello in hello track by $index"> <div ng-click="data($index)"> {{data}} </div> </div> $scope.data = function($index) { $scope.sweet ...

javascriptangularjshtmlionic-framework

What is the correct method for dynamically importing framer-motion in NextJS?

I am currently utilizing framer-motion in my NextJS project. My goal is to import {motion} using Next's dynamic import method. However, I am encountering difficulties as it does not seem to function properly. import { motion } from "framer-motion ...

javascriptnext.jsframer-motiondynamic-import

When a user clicks on an element, use jQuery to show a specific

I am looking to extract the Admission ID field within a separate function that triggers when a user clicks on a button. $(document).ready(function () { $.each(data.student, function (i, item){ trHTML += '<tr>'+ ...

javascriptphpjquery

Exploring the DOM with jQuery to effectively select multiple elements

I am currently attempting to locate and select all elements with the "findme" class, and then identify the selects that are located nearby. http://jsfiddle.net/R93md/1/ Specifically, I have experimented with $(".findme").parent().prev().first(); Once ...

javascriptjquerydomjquery-selectors