2016-08-22 15 views
1

私のmysqlデータベースを検索するこのオートコンプリート検索を作成しました。検索アイコンがオートコンプリート検索に表示されない

<div class="search-bar"> 
 
    <div class="ui-widget"> 
 
    <input id="skills" class="search1" placeholder="Cerca un tipo di marca"> 
 
    <input type="submit" value=""> 
 
    </div> 
 
</div>
ここ

は、データベース接続である: はここに私のコードです

<?php 
    $dbHost='localhost'; 
    $dbUsername='root'; 
    $dbPassword='evolvia2016'; 
    $dbName='codexworld'; 

    $db=new mysqli($dbHost,$dbUsername,$dbPassword,$dbName); 

    //get search term 
    $searchTerm=$_GET['term']; 

    //get matched data from skills table 
    $query=$db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC"); 
    while ($row = $query->fetch_assoc()) { 
     $data[] = $row['skill']; 
    } 
    //return json data 
    echo json_encode($data); 
?> 

問題は、ボタンや、ここに表示されますdoesntの検索アイコン(ズーム)を提出することです作成済み:

<input type="submit" value=""> 

は検索アイコンを出力しますが、うまく動作するテキストボックスを除いては何も表示されません。したがって、検索アイコンを除いてオートコンプリートはOKです。誰かが私を助けることができますか?私は自分のコードで間違ったことをしましたか?

+0

送信ボタンの高さと幅を固定しましたか? CSSの例: 'input [type =" submit "] {width:22px;高さ:22px;表示ブロック; } ' –

+0

' '" 'の値を割り当てると、テキストなしの非常に狭いボタンになります – RamRaider

+0

検索アイコン?あなたが何を参照しているのかも不明です – epascarello

答えて

0

代わり入力タイプその後、型にはめるために=使用を「送信」ボタンのあなたのための検索アイコンとスニペット、。

<html> 

    <head> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
    <script data-require="[email protected]*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="row"> 
     <div id="custom-search-input"> 
      <div class="input-group col-md-12"> 
      <input type="text" class=" search-query form-control" placeholder="Search" /> 
      <span class="input-group-btn"> 
       <button class="btn btn-danger" type="button"> 
       <span class=" glyphicon glyphicon-search"></span> 
       </button> 
      </span> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 

</html> 
関連する問題