Strategies for restricting user input within a datalist

Question

Strategies for restricting user input within a datalist

I have a project in which I am creating a webpage that displays a list of flights that can be filtered by destination, origin, price, and more. To achieve this, I have categorized each flight within a div element using its specific properties as classes. For example, a flight bound for America, departing at 2:40pm, and priced at $300 would be represented as

<div class = "flight America 240PM 300"> *Insert descriptive text here* </div>

However, I realized that this setup allows users to incorrectly filter the flights by entering the wrong information in the input fields. This is because there is no distinction between the different class values. I am looking for a way to restrict user input within each field. I have been experimenting with using a datalist to provide predefined options while still allowing some flexibility for freeform text input so users can easily find their desired filters without excessive scrolling. However, allowing entirely custom filters using the datalist poses a challenge (as observed in https://jsfiddle.net/5mwo6agb/3/). How can I constrain user input to only the choices available in the datalist, while also enabling them to type custom filters in the textbox?

(If my approach seems incorrect, please feel free to advise me, as I am relatively new to JavaScript and HTML).

javascript html css

Answer 1

Answer №1

Hello, you can utilize the onchange event on an input field to validate whether the user has entered a value that is in your list of options. Here's how you can do it:

<input type="text" list = "combo-airlines" id="airline" placeholder="Select an Airline" name = "airline" style = "font-size:20px;" onchange="get_data(this)"/>

The function get_data will look like this:

get_data = function(elem) {
  var options = document.getElementById('combo-airlines').getElementsByTagName('option');
  var optionVals = [],
    i = 0;

  for (i; i < options.length; i += 1) {
    optionVals.push(options[i].value);
  }

  if (optionVals.indexOf(elem.value) > -1) {
    console.log(elem.value);
  }
  else {
    console.log("incorrect answer")
  }
}

You can view the modified fiddle Here.

Answer 2

Hello, you can utilize the onchange event on an input field to validate whether the user has entered a value that is in your list of options. Here's how you can do it:

<input type="text" list = "combo-airlines" id="airline" placeholder="Select an Airline" name = "airline" style = "font-size:20px;" onchange="get_data(this)"/>

The function get_data will look like this:

get_data = function(elem) {
  var options = document.getElementById('combo-airlines').getElementsByTagName('option');
  var optionVals = [],
    i = 0;

  for (i; i < options.length; i += 1) {
    optionVals.push(options[i].value);
  }

  if (optionVals.indexOf(elem.value) > -1) {
    console.log(elem.value);
  }
  else {
    console.log("incorrect answer")
  }
}

You can view the modified fiddle Here.

Strategies for restricting user input within a datalist

Answer №1

Similar questions

Here are the steps to calculate the duration between two dates in the specified format:

Issue with Safari not displaying properly when using float:left and float:right (works fine in Firefox and Chrome)

Incorporating a new component into the table tab design with HTML

We apologize, but the module you are looking for cannot be found: Unable to locate 'fs'

Retrieving the current date in React from a distinct date format

Is it time for silverlight to take over for javascript once and for

Organizing an array of objects within MUI cards based on social media platforms

What are some ways to ensure that the promise from postgres is fulfilled before moving forward with my code execution?

Utilizing the scrollTop method to display the number of pixels scrolled on

What is the process of sending a file from a remote URL as a GET response in a Node.js Express application?

Ensure all <li> tags within a HTML document exhibit consistent jquery mousedown and hover effects, abstaining from the assignment of unique IDs to each

Utilizing a combination of Mongo, Mongoose, Multer, and FS for deleting images

What is the method to link a progress bar to the value of a text input?

Invoke a JavaScript function once the div has finished loading

What is the best way to attach functions to specific jQuery objects and exclude others?

Incorporate Add to Homescreen functionality into your Angular 4 Project using JavaScript

Typescript enhances React Native's Pressable component with a pressed property

The Node API is unresponsive when using Postman or accessing through the browser, as it is not returning any status code. However, no errors are displayed when

Trouble with the Ngx-Captcha feature

The information being sent from Angular is not being successfully transmitted to the XAM