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

문제는 버튼이나 여기에 표시 나던 검색 아이콘 (줌)를 제출하는 것입니다 . 만들었습니다.

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

검색 아이콘을 출력하지만 잘 작동하는 텍스트 상자를 제외하고는 아무 것도 표시하지 않습니다. 자동 완성은 검색 아이콘을 제외하고는 괜찮습니다. 누군가가 나를 도울 수 있습니까? 내 코드에서 뭔가 잘못 했습니까? 고마워요!

+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> 
관련 문제