Home/ Questions/Q 8936775
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T10:17:23+00:00

I am trying to use AJAX to auto complete the users text. Right now

  • 0

I am trying to use AJAX to auto complete the users text. Right now I got AJAX to return the results I need for the auto complete feature to the ‘suggestions’ div as the user types. However, what I am trying to accomplish is a dropdown coming out of the input field (“prod-name”) with suggestions as options where the user can simply click on their preferred suggestion and make it the ‘value’ of the input (similar to how google has search suggestions as you type, but a simplified version).

My markup sof far:

<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>

My AJAX code so far (invoice-get-data.php code snippet)

$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>';
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jquery ui provides a widget for such autocompletion : http://jqueryui.com/autocomplete/ .

    The javascript side would be:

    <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>

    And the PHP side would be:

    $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);
    • 0