페이지를 새로 고치지 않고 입력 필드 값 설정

AJAX를 사용하여 사용자 텍스트를 자동 완성하려고합니다. 지금은 AJAX가 자동 완성 기능에 필요한 결과를 사용자 유형으로 '제안'div에 반환하도록했습니다. 그러나 내가 달성하려고하는 것은 입력 필드 ("prod-name")에서 사용자가 선호하는 제안을 클릭하고 입력의 '값'으로 지정할 수있는 옵션으로 제공되는 드롭 다운입니다 입력하는 동안 Google에 추천 검색어가 표시되는 방식, 단순화 된 버전). 지금까지 강도페이지를 새로 고치지 않고 입력 필드 값 설정

내 마크 업 :

<script type="text/javascript"> 
    function search(searchword) { 
     $('#suggestion').load('invoice-get-data.php?searchword=' + searchword); 
    } 
</script> 
</head> 
<body> 

<div class="prod-name"> 
    <input onKeyPress="search(this.value)" type="text" id="prod-name"/> 
    <div id="suggestion"></div> 
</div> 
</body>

내 AJAX 코드까지 (송장 얻을-data.php 코드를)

$searchword = $_GET['searchword']; 

    $results = mysql_query("SELECT * FROM products WHERE prod_name LIKE '".$searchword."%'") or die(mysql_error()); 

    while($row = mysql_fetch_array($results)){ 
     echo $row['prod-name'] . '<br>'; 
    }

출처

2012-12-05 AnchovyLegend

주십시오, 새로운 코드를 작성하는'mysql_로 *'기능을 사용하지 마십시오. 더 이상 유지 관리되지 않으며 커뮤니티가 [지원 중단 프로세스] (http://goo.gl/KJveJ)를 시작했습니다. * [빨간색 상자] (http://goo.gl/GPmFd) *를 참조하십시오. 대신 [prepared statements] (http://goo.gl/vn8zQ)에 대해 알아야하고 [PDO] (http://php.net/pdo) 또는 [MySQLi] (http://php.net/)를 사용해야합니다. mysqli). 어떤 것을 결정할 수 없다면 [이 기사] (http://goo.gl/3gqF9)가 도움이 될 것입니다. PDO를 선택하면 [여기는 좋은 가이드입니다] (http://goo.gl/vFWnC). 그대로 서면, 코드는 SQL injection에 개방되어 있습니다. –

답장을 보내 주셔서 감사합니다. 나는 그것을 염두에 두겠다. 그러나 현재 테스트 서버를 사용하고 있으며 SQL 삽입을 통해 스크립트가 성공적으로 실행되지 않아야합니다. – AnchovyLegend

JQuery와 UI는 자동 완성을위한 위젯을 제공 http://jqueryui.com/autocomplete/.

자바 스크립트 측면은 다음과 같습니다

<script> 
$(function() { 
    $("#prod-name").autocomplete({ 
     source: "invoice-get-data.php", 
     minLength: 2, 
     select: function(event, ui) { 
      alert("Product #" + ui.item.id + " selected"); 
      return true; 
     } 
    } 
    }); 
}); 
</script>

그리고 PHP 측면은 다음과 같습니다

$searchword = $_GET['term']; 

$results = mysql_query("SELECT * FROM products WHERE prod_name LIKE '".$searchword."%'") or die(mysql_error()); 

$data = array(); 
while($row = mysql_fetch_array($results)){ 
    $data[]  = array(
     "id"  => $row['id'], 
     "value"  => $row['prod-name'], 
     "label"  => $row['prod-name'] 
    ); 
} 

echo json_encode($data);

출처

2012-12-05 01:16:33 tmuguet

자동 완성에서 'term'을 사용하여 PHP 코드를 편집했습니다. – tmuguet

답장을 보내 주셔서 감사합니다! 감사합니다. 나는 jquery autocomplete 코드에서 소스를 설정하는 자바 스크립트 함수에서 PHP 배열 데이터를 수집 할 수있는 방법을 이해하지 못한다. $ 데이터 배열의 값은? ... 당신이 배열 obj에 'source'값을 설정하는 포함 된 수동 링크에서 메서드를 사용하려고합니다. – AnchovyLegend

'select'이벤트에서 ui.item 객체는 $ data 배열 (id, value, label 또는 $ data에 추가 한 임의의 인덱스)의 값을 포함합니다. – tmuguet

페이지를 새로 고치지 않고 입력 필드 값 설정

답변

관련 문제