搜索图标不会出现在自动完成搜索中
Posted
技术标签:
【中文标题】搜索图标不会出现在自动完成搜索中【英文标题】：Search icon doesnt appear in autocomplete search 【发布时间】：2016-12-29 02:00:24 【问题描述】：我创建了这个在我的 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);
?>
问题是提交按钮或搜索图标（缩放）没有出现在这里。我创建了这个：
<input type="submit" value="">
输出搜索图标，但除了一个运行良好的文本框外，什么都没有。所以除了搜索图标之外，自动完成是可以的。有人可以帮助我吗？我的代码做错了吗？谢谢！
【问题讨论】：
是否尝试为提交按钮添加固定的高度和宽度？ CSS 示例：input[type="submit"] width: 22px; height: 22px; display: block;
分配"" 的值将导致按钮非常窄且没有文字
搜索图标？也不清楚你指的是什么
【参考方案1】：
一个带有搜索图标的 sn-p，而不是 input type="submit" 使用 button 来风格化。
<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>
【讨论】：
以上是关于搜索图标不会出现在自动完成搜索中的主要内容，如果未能解决你的问题，请参考以下文章