发表新帖
发表新帖

How to achieve autocomplete feature over HTML drop-down or select element?

后端 未结
关注
5 861
悲&欢浪女
悲&欢浪女 2021-01-17 04:51

Hi I am trying to create auto completion functionality for a drop-down OR select html form element.

I need a functionality like once us

相关标签:
5条回答
  • 孤城傲影
    2021-01-17 05:31

    This can be achieved in a simple way. Reference from the following library https://jqueryui.com/autocomplete/

    Import the following headers using cdn links

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    Load an array with the data

     <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>

    Create an input feild

    <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

    Complete Code

     $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

    0 讨论(0)
  • 臣服心动
    2021-01-17 05:43

    There are many options, I have used Selectize.js and Select2. I found Select2 is much better and easy to use, and light weight! Also very easy to update with ajax call (example: search city, country, user etc...)

    link: http://selectize.github.io/selectize.js/

    checkout the example below:

    $(function() {
  $('select')
    .select2({
      placeholder: 'type now...',
      width: '200',
      multiple: true,
      data: [{
        id: 'A & A, LLC.',
        text: 'A & A, LLC.'
      }, {
        id: 'testing1',
        text: 'testing1'
      }, {
        id: 'testing 1,2,3',
        text: 'testing 1,2,3'
      }],
      tokenSeparators: ['|']
    })
    .on('change', function() {
      console.log($(this).val());
    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />



<select></select>

    0 讨论(0)
  • 没有蜡笔的小新
    2021-01-17 05:47

    You can use jQuery select2 plugin. It simply make HTML Select box to Auto Complete: Select2

    <link 
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" 
rel="stylesheet" />
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script 

src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".js-example-basic-multiple").select2();
});
</script>

<select class="js-example-basic-multiple" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>
    0 讨论(0)
  • 滥情空心
    2021-01-17 05:52

    The simplest searchable dropdown using bootstrap:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<select class="selectpicker" data-live-search="true" >
    <option>Alabama</option>
    <option>Alaska </option>
    <option>Arizona </option>
    <option>Arkansas </option>
    <option>California </option>
    <option>Colorado </option>
    <option>Connecticut </option>
    <option>Delaware </option>
    <option>Florida </option>
    <option>Georgia </option>
    <option>Hawaii </option>
    <option>Idaho </option>
    <option>Illinois Indiana </option>
    <option>Iowa </option>
    <option>Kansas </option>
    <option>Kentucky </option>
    <option>Louisiana </option>
    <option>Maine </option>
    <option>Maryland </option>
    <option>Massachusetts </option>
    <option>Michigan </option>
    <option>Minnesota </option>
    <option>Mississippi </option>
    <option>Missouri </option>
    <option>Montana Nebraska </option>
    <option>Nevada </option>
    <option>New Hampshire </option>
    <option>New Jersey </option>
    <option>New Mexico </option>
    <option>New York </option>
    <option>North Carolina </option>
    <option>North Dakota </option>
    <option>Ohio </option>
    <option>Oklahoma </option>
    <option>Oregon </option>
    <option>Pennsylvania Rhode Island </option>
    <option>South Carolina </option>
    <option>South Dakota </option>
    <option>Tennessee </option>
    <option>Texas </option>
    <option>Utah </option>
    <option>Vermont </option>
    <option>Virginia </option>
    <option>Washington </option>
    <option>West Virginia </option>
    <option>Wisconsin </option>
    <option>Wyoming</option>
</select>





<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    Find documentation:
    <a href='http://getbootstrap.com/css/'>
        Get Bootstrap 3
    </a><br/>
    Fork This Skeleton Here: 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'>
        Bootstrap 3 Skeleton
    </a><br/>
</div>

    0 讨论(0)
  • 鱼传尺愫
    2021-01-17 05:56

    You can try HTML <datalist> tag for autocomplete dropdown. Try here.

    <form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

    If you don't want to add a default value in the dropdown or unselected dropdown then remove value attribute from the input tag.

    0 讨论(0)
 看不清?
提交回复
热议问题