Attach Suggestion List To Input Field - jQuery input-dropdown

input-dropdown is a jQuery plugin that attaches a dropdown list containing predefined suggestions to the regular input field when clicked.

Ideal for simulating the autocomplete functionality that enables the user to quickly insert values into the input field.

How to use it:

1. Create an input field on the page. You might need to turn off the native autocomplete functionality for better experience.

<input type="text" id="example" autocomplete="off">

2. Insert the input-dropdown plugin's script after the latest jQuery library (slim build is recommended).

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jquery.input-dropdown.js"></script>

3. Define your suggestions in an array of JS objects as follows:

const dataList = [
      { name: 'jQueryScript.Net', value: 'jQueryScript' },
      { name: 'jQuery Library', value: 'jQuery' },
      { name: 'Angular Framework', value: 'Angular'},
      { name: 'React Framework', value: 'React' },
      { name: 'VueJS Framework', value: 'Vue' },
      { name: 'Vanilla JavaScript', value: 'JavaScript' },
      { name: 'CSS/CSS3', value: 'CSS' },
      { name: 'HTML/XML', value: 'HTML'}
]

4. Attach the suggestion list to the input field and format the output using the formatter function.

$('#example').inputDropdown(dataList, {
  formatter: data => {
    return `<li language=${data.value}>${data.name}</li>`
  },
  valueKey: 'language' // default: data-value
})

5. Customize the appearance of the suggestion list.

$('#example').inputDropdown(dataList, {
  maxHeight: '250px',
  color: '#252525',
  fontSize: '14px',
  background: '#eee'
})

6. Apply your own CSS styles to the suggestion list.

ul.jq-input-dropdown,
ul.jq-input-dropdown li {
  margin: 0.75rem auto;
  padding: 0.75rem;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ul.jq-input-dropdown {
  border: 1px solid #ccc;
  list-style: none;
  display: none;
  z-index: 100;
  min-width: 400px;
}

ul.jq-input-dropdown li:hover {
  background-color: #222;
  color: #fff;
  cursor: pointer;
}

---

This awesome jQuery plugin is developed by kohei-kp. For more Advanced Usages, please check the demo page or visit the official website.