2015-04-04 63 views
2
<script type="text/javascript"> 
$(document).ready(function(){ 
     $('input').typeahead({ 
      name: 'accounts', 
      local: []//here my data 

     }); 
    }); 
</script> 



<title>Search Service</title> 
</head> 
<body style="background-color: black; color: white;"> 

    <div class="container"> 
     <div class="col-lg-12" style="height: 100px;">&nbsp;</div> 

     <div class="col-lg-12"> 
      <div class="col-lg-2"></div> 
      <div class="col-lg-8"> 
       <section class="webdesigntuts-workshop"> 
        <form action="" method="">   
         <input type="search" placeholder="Search..."> 
         <input type="text" id="service" placeholder="Services" autocomplete="off">    
         <button>Search</button> 
        </form> 
       </section>  
      </div> 
      <div class="col-lg-2"></div> 
     </div> 
    </div> 


</body> 
</html> 

这是我简单的示例代码。我已经为脚本加载添加了bootstrap.min.js和typeahead.js。它们都在浏览器中正确加载。但提前引导类型不起作用。引导类型前面不起作用

+0

你使用的是什么版本的Bootstrap?你正在使用什么版本的Typeahead? – cfnerd 2015-05-18 21:18:39

回答

8

您可能已经想出了一个解决方案,但我的建议是使用此替代方案代替此Bootstrap-3-Typeahead。使用和理解更简单。使用该插件时,在我的环境下面的工作:

的HTML

<input type="search" placeholder="Search..." data-provide="typeahead" /> 
<input type="text" id="service" placeholder="Services" autocomplete="off" data-provide="typeahead" /> 

的JS:

$(document).ready(function(){ 
    $("input").typeahead({ 
     source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] 
     , minLength: 2 
    }); 
}); 

希望这有助于。