CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
H.fate
H.fate

Reputation: 644

jQuery UI autocomplete doesn't work well on Bootstrap dropdown

CODE:

<body>
  <div class="container">  

      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">dumped_li</a></li>
          <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
          </div>
        </ul>
       </div>

    </div>
</body>

    <script>
      $( function() {
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
        ];
        $( "#tags" ).autocomplete({
          source: availableTags
        });
      } );
      </script>

I made some code that have jQuery UI - autocomplete in Bootstrap dropdown.

When I run it, searchbar(in this case, input-#tags) is placed well in dropdown-menu, But autocomplish() results are showed outside of the dropdown-menu itself.

Question: How can I place nicely autocomplish() results to inside of the dropdown-menu like input element (#tags)?

EDIT:

I read this stackoverflow post : https://stackoverflow.com/a/7944662/6736285 And I found that difference between using Bootstrap or not.

Look, If i use bootstrap: jsfiddle : http://jsfiddle.net/uMqyn/912/

CODE:

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

</head>

<body>
  <div class="dropdown bigdiv">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
    <ul class="dropdown-menu bigul">
      <li><a href="#">dumped_li</a></li>
      <li class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
      </li>
    </ul>
  </div>
  <br/>
  <br/>
  <br/>

  <br/>
  <br/>
  <div class="anotherdiv" style="background-color: #447e9b; height: 200px;">
    GoesHere:
    <br/>
    <ul></ul>
  </div>
</body>
<script>
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
];
$('#tags').autocomplete({
    search: function(event, ui) {
        $('.anotherdiv ul').empty();
    },
    source: availableTags
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li></li>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.anotherdiv ul'));
};
</script>

As you can see in jsfiddle, it works as if result are not in anotherdiv.

But I remove bootstrap, It works well.

You can see bootstrap removed version jsfiddle : http://jsfiddle.net/uMqyn/913/

So,

Question1: Why bootstrap make this situation?

Question2: How can I make it doing well at showing results even I'm using bootstrap?

Upvotes: 1

Views: 1883

Answers (1)

Peter Stark
Peter Stark

Reputation: 608

AFAIK you're probably running into some compatibility issues (I'm not sure, but I probably will ditch jquery ui if i'm in ur position - it has not been updated and quite old - and may not be very compatible with bootstrap css).

From https://jqueryui.com/
It seems jQuery UI v1.12.1 is only compatible with jQuery 1.7+

jQuery UI v1.12.1
jQuery 1.7+

From your sample (http://jsfiddle.net/uMqyn/912/), you're trying to use jquery-ui 1.12.1 with jquery 3.2.1.

with bootstrap + jquery 1.9.1 + jquery-ui 1.9.2

http://jsfiddle.net/sudarpochong/uMqyn/914/

without bootstrap (only jquery 1.9.1 + jquery-ui 1.9.2)

http://jsfiddle.net/sudarpochong/uMqyn/916/

Notes

If you notice, both links above (with and without bootstrap) produce similar result as you will expect in your fiddle http://jsfiddle.net/uMqyn/913/

P.S.

  • Check jsfiddle --> external resources on how to include bootstrap js and css.
  • JSFiddle - Javascript option allow you to select jquery and jquery ui

Upvotes: 2

Related Questions