搜索图标不会显示在自动填充搜索中

时间:2016-08-22 13:27:02

标签: javascript php jquery mysql autocomplete

我创建了这个在我的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>
&#13;
&#13;
&#13;

这是数据库连接:

<?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);
?>

问题是提交按钮或搜索图标(缩放)没有出现在这里。我创建了这个:

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

输出搜索图标,但除了文本框效果良好之外没有其他内容。因此除了搜索图标外,自动完成功能正常。有人可以帮助我吗?我的代码中有错误吗?谢谢!

1 个答案:

答案 0 :(得分:0)

带有搜索图标的代码段,而非输入类型=“提交”,然后使用按钮进行样式化。

<html>

  <head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script data-require="bootstrap@*" 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>