Swap out the content in a text input box with the text chosen from a suggested autocomplete option

Question

Swap out the content in a text input box with the text chosen from a suggested autocomplete option

I am working on a text input box with auto-complete options displayed below it. I want to enable users to navigate through the options using keyboard arrows and "select" one, causing it to change color. How can I update the text in the input box with the selected option, similar to what search engines do?

<input class="searchBox" id="searchBox" name="q" type="text" autocomplete="off" placeholder="hi">

<div class="autoSuggestContainer">
  <span>Select from Menu</span>
    <a>history</a>
    <a>hilton</a>
    <a>hip2save</a>
    <a>hillary clinton</a>
    <a>hickok45</a>
    <a>hitler</a>
    <a>hibiscus</a>
    <a>hipaa</a>
</div>

For the full code including HTML, CSS, and Javascript implementation, you can access it via this link: https://jsfiddle.net/qckyu5e6/

javascript html jquery css

Answer 1

Answer №1

Once you toggle the selected class for moving up and down, you can extract the anchor tag containing the text with the selected class and set it to the input tag. Check out this example

    $("#searchBox").val($(".selected").text());

Answer 2

Once you toggle the selected class for moving up and down, you can extract the anchor tag containing the text with the selected class and set it to the input tag. Check out this example

    $("#searchBox").val($(".selected").text());

Answer 3

Answer №2

By following this method, you can achieve the desired outcome:

$('.searchBox').val($(".selected").text());

To activate it, you must include a new case in your keyDown event to handle the 'enter' key, as well as a click event:

document.onkeydown = function (e) {
  e.preventDefault();
  
  switch (e.keyCode) {
    case 38:
      moveUp();
      break;      
    case 40:   
      moveDown();
      break;
    case 13:
      //handle enter key
      setInputText($(".selected").text());
      break;
    }
};

$(".urlnamelinkAS").on("click", function () {
    setInputText($(this).text());
});

function setInputText(text){
    $('.searchBox').val(text);
}

Answer 4

By following this method, you can achieve the desired outcome:

$('.searchBox').val($(".selected").text());

To activate it, you must include a new case in your keyDown event to handle the 'enter' key, as well as a click event:

document.onkeydown = function (e) {
  e.preventDefault();
  
  switch (e.keyCode) {
    case 38:
      moveUp();
      break;      
    case 40:   
      moveDown();
      break;
    case 13:
      //handle enter key
      setInputText($(".selected").text());
      break;
    }
};

$(".urlnamelinkAS").on("click", function () {
    setInputText($(this).text());
});

function setInputText(text){
    $('.searchBox').val(text);
}

Swap out the content in a text input box with the text chosen from a suggested autocomplete option

Answer №1

Answer №2

Similar questions

Converting php array submitted from a form using ajax

Struggling with converting 11-line toy neural network code into JavaScript

What is the mechanism of `this` in higher order components?

Error Alert: Invalid type specified in React.createElement - Electron-React-Boilerplate

The controller did not receive the necessary jQuery controls

I want to hide jqvmap when viewing on mobile devices

Separate the elements with a delimiter

To effectively utilize the expect function in testing, should you use it over softAssertAll or find a way to explicitly display in the test results that the softAssertAll has successfully passed? (Error

Is the detailedDescription missing from the JSON-LD schema crawl?

Something seems off with the color of the getImageData when using Fabric JS getContext('2d')

Spacing for Bootstrap Navbar List Items

Using AngularJS to Nest ng-view within ng-repeat

Encase all jQuery functionalities within a custom class

Learn the effective way to customize the primary button text color in Bootstrap 4 using SCSS styling

Looking to display or conceal several divs according to the option selected from a dropdown menu?

@page Css not displaying properly on the Mozilla Firefox browser

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Exploring Type Refinements with Flow

Using jQuery to target and select a specific div element by its class

Retrieve the JSON data embedded within the HTML source code and utilize its contents