2016-08-22 3 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); 
?> 

Проблема заключается в том, что кнопка или значок поиска (масштабирование) не появляется здесь представить .I создал:

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

, чтобы вывести значок поиска, но ничего не найдено, кроме текстового поля, которое хорошо работает. Таким образом, автозаполнение в порядке, за исключением значка поиска. Может ли кто-нибудь помочь мне? Я сделал что-то не так в своем коде? Спасибо!

+0

Вы пытались добавить фиксированную высоту и ширину для кнопки отправки? Пример CSS: 'input [type =" submit "] {width: 22px; высота: 22px; display: block; } ' –

+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> 
Смежные вопросы