angucomplete-alto automatically fills in data based on another input

Having two autocomplete select boxes with a unique feature has been quite interesting. The first input accepts a code that is related to a label, autofilling the second input with the corresponding object once the code is selected in the first input. However, the second input also offers autocomplete functionality as the code field is not mandatory.

An important detail about the first input (code) is that it always consists of 2 characters, no more and no less. Despite this, users can still input more than 2 characters. While my code effectively auto-selects the object and removes any extra characters beyond the required 2 from the user's input in the first field, I actually need those additional characters to remain. How can I customize this functionality?

The autocomplete module I am utilizing is Angucomplete-Alt.

Here's a snippet of my code:

<div angucomplete-alt
                                  id="flight_code"

                                  placeholder="flight code"
                                  pause="100"
                                  selected-object="claim.flight_details.flight_code"
                                  local-data="airlines"
                                  local-search="localSearch"
                                  search-fields="code_airline"
                                  title-field="code_airline"
                                  minlength="2"
                                  input-name="operating_airline"
                                  input-class="form-control form-control-small"
                                  match-class="highlight"
                                  field-required="false">

<div angucomplete-alt
                                   local-search="localSearch"
                                  id="operating_airline"
                                  placeholder="Search airline"
                                  pause="100"
                                  selected-object="claim.flight_details.operating_airline"
                                  local-data="airlines"
                                  search-fields="label"
                                  title-field="label"
                                  minlength="1"
                                  input-name="operating_airline"
                                  input-class="form-control form-control-small"
                                  match-class="highlight"
                                  field-required="true"
                                  initial-value="claim.flight_details.flight_code.originalObject">
                                </div>

Controller:

 $scope.localSearch = function(str, code_airline) {
  var matches = [];
  code_airline.forEach(function(code) {

      if(str.toString().substring(0, 2).toUpperCase() === code.code_airline){
          console.log("I found him!!");
          matches.push(code);
      }       

  });
  return matches;
};

Answer №1

I successfully resolved my issue by modifying the initial input code to a standard input and utilizing the ngChange directive to track changes in characters. I then created a promise to search for the corresponding object, which was subsequently inserted into the angcomplete input using the initialValue property.

Controller:

$scope.automaticFill = function(){
    var str = $scope.claim.flight_details.flight_code;
   if(str.toString().length === 2){
          console.log("Change detected");
       $http.get('data/airlines-companies.json').then(function(response){

        var airlines = response.data; 

            airlines.forEach(function(code) {
            if(code.code_airline === str.toString().toUpperCase())
             $scope.test = code;
            });
        });

      }
};    

HTML:

<input type="text" 
                                class="form-control" 
                                ng-model="claim.flight_details.flight_code" 
                                name="flight_code" 
                                id="flight_code"
                                ng-change="automaticFill()">

<div angucomplete-alt
                                   local-search="tap"
                                  id="operating_airline"
                                  placeholder="Search airline"
                                  pause="100"
                                  selected-object="claim.flight_details.operating_airline"
                                  local-data="airlines"
                                  search-fields="label"
                                  title-field="label"
                                  minlength="1"
                                  input-name="operating_airline"
                                  input-class="form-control form-control-small"
                                  match-class="highlight"
                                  field-required="true"
                                  initial-value="test">

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

What is the best way to set the value of the days in a month to a div

I've been experimenting with creating a calendar using javascript, HTML, and CSS on my own. I managed to achieve some functionality like obtaining the current month and year as well as the previous month and year by clicking a button in HTML. However, ...

Unit testing tips: the art of mocking a wrapper function

Unit testing is a new concept for me and I'm currently trying to learn how to stub a wrapper function in Sinon/Mocha. For example, if I have a function like: const user = await User.findOne({ email: email }); I've been successful in stubbing it ...

Accessing parent directives for forms - custom form names and dynamic validation

Introduction My current task involves validating dynamically created forms within a directive. These forms are all managed and submitted separately. When the form is submitted, I need to display validation errors for each individual form without any issu ...

Preventing file visibility in Three.js resource directory

Once a user clicks on a specific 3D model, I retrieve it from the server and render it in the browser using three.js. However, there is an issue when the user tries to access a model that is not free - they can easily view and download the STL file by go ...

Implementing auto-population of input field in Vue JS based on dropdown selection

I'm in search of a solution for automatically filling input fields in Vue.js. My form consists of various input types such as text, select dropdowns, and quantities. I want the vCPU, vRAM, and Storage Capacity fields to be filled with predefined value ...

Creating images with LibCanvas

Currently, I am utilizing LibCanvas for canvas drawing on my HTML page. However, I am facing difficulty in drawing an image. Can someone provide assistance with this? UPDATE: The code snippet I am using is showing the image being drawn but then it disappe ...

Leveraging a specific section of an HTML5 CSS3 Bootstrap template in a separate template

As I create my website using a combination of free templates, I often find myself needing to merge elements from different designs. One specific example is wanting to incorporate the "Client Logo Slider" component from template 2 into my original template. ...

What is the best way to manipulate and update individual counters in React components?

I developed a ticket ordering system for a project, but encountered an issue where increasing the quantity of one ticket also resulted in the incrementation of the other ticket's counter. I suspect this occurs because only one value is stored in the s ...

Tips for sending multiple post parameters to a web API in Angular using TypeScript

I am looking to send multiple values to a web API using AngularJS TypeScript. // POST api/values public void Post([FromBody]string value1, [FromBody]string value2) { } I want to make the method call like this: $http.post('api/values', ???) I ...

Adjust the formatDate function in the Material UI datepicker

I recently implemented the material-ui datepicker component with redux form and it's been working great. However, I have encountered a minor issue. Whenever I change the date, it displays in the input field as yyyy-mm-dd format. I would like it to app ...

Is there a way to bring in a variable from the front end script?

Is it possible to transfer an array of data from one HTML file to another? If so, how can this be done? Consider the following scenario: First HTML file <script> let tmp = <%- result %>; let a = '' for (const i in tmp){ ...

Incorporate a new style into several previous slides using the Slick carousel feature

I'm attempting to utilize the Slick carousel to create a timeline. My goal is for the previous slides to remain colored as you progress through the timeline, and turn grey when you go back. I've tried using onAfterChange and onBeforeChange, but I ...

How can "this" be properly utilized in jQuery?

I am attempting to retrieve the title attribute of an element from various elements with the same class, each having different attributes. This is my current approach: HTML <div title="title1" class="pager" onclick="location.href='link.aspx& ...

Warning: Unidentified JavaScript alert(notification) encountered without declaring a

Imagine this scenario - when I type the following command: open google.com I need JavaScript to detect "open google.com" and prompt me with an alert. The challenge is figuring out how to generate an alert for just "google.com" without including "open". ...

Tips for successfully utilizing hyphens when passing an object property as an argument

Does anyone know how to pass an object property with a hyphen in it as an argument? I'm having trouble with this issue. Object { "section-id": 1, ... } HTML <div *ngFor="let section of sections" (trackScrollLeave)="leave(section.sectio ...

Looking for specific data in AngularJS using a filter

I'm facing a situation where I have to search based on filtered values. Below is the code snippet var app = angular.module('MainModule', []); app.controller('MainCtrl', function($scope) { $scope.searchText = '& ...

Navigating through JSON arrays with Node.js

I have been given the task of iterating through a complex JSON file that contains an array of JSON objects. I am finding it difficult to access the array object within the JSON file. Specifically, I need to access the "class-name" object from the JSON f ...

One way to transfer data from the back end into a two-dimensional array is by retrieving the data and then transforming it into the desired format before sending it to

How can I format backend data into a specific format using JavaScript? Even though I retrieve data from the backend, json_encode($myarry) does not display my data. $query = "SELECT * FROM LOCATIONS"; $result= mysql_query($query); while($row = mysql_fetch ...

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Recently delving into the world of reactjs, I find myself facing a challenge with a page that contains 3 distinct blocks formed by divs. Have a look at the layout on my page: My Page This is the code snippet I have worked on: return ( <div> ...

Refreshing a data object that is shared among Vue components

I've recently started diving into Vue, and I've found myself responsible for tweaking an existing codebase. There's this data.js file that caught my attention, containing a handful of objects holding city information, like: export default { ...