引導式破碎帶自動完成構件

我與笨和自舉一個項目，我做了一個自動完成系統，但CSS看起來打破這樣引導式破碎帶自動完成構件

https://gyazo.com/4af7ae2bbdfd5547233d192b80ef947e

沒有自定義樣式，只有引導分鐘的CSS，這是我的觀點的HTML代碼，任何幫助的樣子，應該會理解

<h2>Welcome to Crossover Laboratory</h2> 
<div class="row"> 
<div class="col-md-1"> 
&nbsp; 
</div> 
<div class='col-md-10 text-center'> 
<h3>Patients</h3> 
    <?php echo $error2; ?> 
    <?php 
    $attributes2 = array(
    "class"=>"form-horizontal", 
    "id" => "LoginForm2", 
    "name" => "LoginForm2", 
    "method" => "post" 
    ); 
    echo form_open("laboratory/patients", $attributes2); ?> 
    <div class="form-group"> 
    <input type="text" name="username_patients" id="username_patients" class="ui-autocomplete-input" value="" required placeholder="Name" /> 
    <p id="patient_name"></p> 
    </div> 

    <div class="form-group"> 

    <input type="password" name="password_patients" id="password_patients" value="" required placeholder="Code"/> 
    </div> 
    <div class="form-group"> 
    <?php echo form_submit("Login2","Login"); ?>  
    </div> 
    <?php echo form_close(); ?> 

</div> 


<div class="col-md-1"> 
&nbsp; 
</div> 
</div> 
<script type="text/javascript"> 

$(document).ready(function($) { 

    $("#username_patients").autocomplete({ 
     source: '<?php echo site_url('laboratory/autocomplete'); ?>', 
     minlenght: 2, 
     html: true, 
     open: function(event, ui) 
     { 
      $(".ui-autocomplete").css("z-index",1000); 
     } 
    }); 

}); 
</script>

來源

2015-09-01 Ricardo Rios

添加一些CSS來.UI，自動完成類或使用https://twitter.github.io/typeahead.js –

@Gopal哪有我添加了一些CSS，我不是前面的，並且如何使用typeahead.js？ –

我想你已經錯過了jQueryUI的CSS引用。添加下面的CSS在你的應用<head>部分，並嘗試..

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

來源

2015-09-01 04:06:13 Soundar

引導式破碎帶自動完成構件

回答

相關問題