javascript - bootstrap textbox autocomplete - Stack Overflow

admin管理员组

文章数量:1297053

I am using this Bootstrap as my GUI.

I've seen this LINK related to my problem. But when I try the code from the @KyleMit I have an error in my console. I got this Uncaught TypeError: $(...).autoplete is not a function

My current Bootstrap

Current Code

$(".autoplete").autoplete({
            source: "/Controller/Action",
            minLength: 1,
            select: function (event, ui) {
                if (ui.item) {
                    $(".autoplete").val(ui.item.value);
                }
            }
        });

<script src=".1.1/jquery.min.js"></script>
<div class="container">

  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autoplete" placeholder="Enter A" />
  </div>

</div>

I am using this Bootstrap as my GUI.

I've seen this LINK related to my problem. But when I try the code from the @KyleMit I have an error in my console. I got this Uncaught TypeError: $(...).autoplete is not a function

My current Bootstrap

Current Code

$(".autoplete").autoplete({
            source: "/Controller/Action",
            minLength: 1,
            select: function (event, ui) {
                if (ui.item) {
                    $(".autoplete").val(ui.item.value);
                }
            }
        });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="form-group">
    <label>Languages</label>
    <input class="form-control autoplete" placeholder="Enter A" />
  </div>

</div>

• javascript
• jquery
• twitter-bootstrap
• autoplete

Share Improve this question Follow edited May 23, 2017 at 12:25 CommunityBot 111 silver badge asked Jan 25, 2017 at 6:49 KiRaKiRa 92433 gold badges1818 silver badges4646 bronze badges 6

• 1 which js you are including, I means bootstrap and others ? I means, have you included jquery-ui.js ? please check your suggested link's answer for more details – Rahul Commented Jan 25, 2017 at 6:52
• @rahul_m sorry for the inconvenience. Please take a loot in my edit link. – KiRa Commented Jan 25, 2017 at 7:08
• And where you want autoplete ? – Rahul Commented Jan 25, 2017 at 7:09
• 2 You shouldn't expect people to just download an archive and build your project locally. Instead, use the snippet tool (<> button) to create a minimal reproducible example of your problem. From what you describe, you are not including everything needed for jQuery UI to work. You can customize what is included in your jQuery UI package here. – tao Commented Jan 25, 2017 at 7:15
• @AndreiGheorghiu I didn't say DL it and build for me. I posted it cuz I forgot the link where did I get it. and rahul ask for jquery's. Instead of typing it I just share the archive. – KiRa Commented Jan 25, 2017 at 7:25

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

Check this basic example of jquery autoplete,

JS 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" ).autoplete({
      source: availableTags
    });
  } );

Your html,

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

Include following code in your head tag,

<link rel="stylesheet" href="https://code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>

You can find jsfiddle here.

本文标签： javascriptbootstrap textbox autocompleteStack Overflow