Javascript 引导搜索栏上的jquery自动完成

是否可以将Jquery自动完成放在引导搜索栏中。所以当有人使用搜索栏时，他们会显示下面的标签

jquery自动完成

 $(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"
];
$( "#text" ).autocomplete({
  source: availableTags
});

}))

引导搜索栏

  <div class="col-lg-4 col-md-5 col-sm-3">
                <form class="navbar-form" id="theSearchForm" name="theSearchForm" role="search" method="get" action="yoursearchfilescriptgoeshere">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <div class="input-group-btn">
                            <a class="btn btn-default" href="javascript:document.theSearchForm.submit();"><i class="glyphicon glyphicon-search"></i></a>

                        </div>

---

是，您可以找到工作fiddel：

---

我是否遗漏了一些东西，或者没有Id为“text”的HTML元素我对jquery不是很在行，我从jquery ui站点获得了第一部分如果实现正确，我看不出它不起作用的原因。请看下面Hasan的回答这将无法正常工作jQuery auto complete在引导中存在样式问题，正如您的小提琴中所看到的，这会导致结果的显示div出现问题，因为我没有添加jQuery ui cssCan您可以添加它，我很确定即使您添加了css，它也存在问题

$(".autocomplete").autocomplete({
    source: availableTags
  });