MySQL 자동 완성 필드 사용

Question

저는 웹 개발에 익숙하지 않고 가족 비즈니스를위한 웹 사이트를 만들고 있습니다. 우리는 약국을 운영하고 있으며, 고객 의사가 새로운 처방전을 온라인으로 제출하고 수식에 대한 가격 견적을받을 수있는 기능을 구현하고 싶습니다. 이미 주문 양식에 대한 페이지가 있지만, 수식의 데이터베이스를 사용하여 "약물"필드를 자동 완성하고 싶습니다.

MySQL (Fedora 서버의 MariaDB) 데이터베이스가 이미 설정되어 있고 쿼리 할 준비가되었습니다. 입력란을 자동 작성하는 방법을 모르겠습니다. 트위터의 Typeahead 자바 스크립트 시스템 구현을 보았지만 JS에 대한 경험이 없으므로 튜토리얼을 따라갈 수 없습니다.

Answer 1

부트 스트랩을 사용하고있는 경우 (그렇지 않은 경우) 선구자를 사용할 수 있습니다. (google typeahead.bundle.js)
부트 스트랩 이후에이 자바 스크립트 파일을 호출하십시오.

그런 다음 당신은 그럼 당신은 입력 그런

<input id="mytextquery" name="mytextquery" type="text" size="71" maxlength="128" value="" placeholder="Carrier (type to search)" class="form-control typeahead"/> 

페이지에 약간의 자바 스크립트를 필요로 약간의 CSS

<style> 
.typeahead, 
.tt-query, 
.tt-hint { 

    font-size: 12px; 

} 

.typeahead { 
    background-color: #fff; 
} 

.typeahead:focus { 
    border: 2px solid #0097cf; 
} 
.tt-query { 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 

.tt-hint { 
    color: #999 
} 

.tt-menu { 
    width: 422px; 
    margin: 12px 0; 
    padding: 8px 0; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
      border-radius: 8px; 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
      box-shadow: 0 5px 10px rgba(0,0,0,.2); 
} 

.tt-suggestion { 
    padding: 3px 20px; 
    font-size: 18px; 
    line-height: 24px; 
} 

.tt-suggestion:hover { 
    cursor: pointer; 
    color: #fff; 
    background-color: #0097cf; 
} 

.tt-suggestion.tt-cursor { 
    color: #fff; 
    background-color: #0097cf; 

} 

.tt-suggestion p { 
    margin: 0; 
} 

.gist { 
    font-size: 14px; 
} 

이 필요합니다.

<script> 
    $(function() { 
    $('#mytextquery').typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 1 
    }, 
    { 
     limit: 12, 
     async: true, 
     source: function (query, processSync, processAsync) { 

     return $.ajax({ 
      url: "typeTest.php", 
      type: 'GET', 
      data: {query: query}, 
      dataType: 'json', 
      success: function (json) { 
      // in this example, json is simply an array of strings 
      return processAsync(json); 
      } 
     }); 
     } 
    }); 

    }); 
</script> 

그런 다음 당신은 당신의 데이터베이스에서 데이터를 가져 오기 위해 사용하는 어떤 일부 PHP 또는

$query = $_GET['query']; 
//Do your SQL query here 
$query = "SELECT * from table where field LIKE '$query'"; 
//Get results and format like below 
$data1 = [ 'Item 1', 'Item 2', 'Item 3' ,'etc', 'etc']; 

//Export it so typeahead can read it. 
header('Content-type: application/json'); 

    echo json_encode($data1);