Using jQuery-ui to autocomplete a text box with php and javascript

Question

I am trying to autocomplete a text box in my search.php code using autocomplete.php

I know that my php code works perfectly and echo's back exactly what is needed for the autocomplete function in jQuery.

Here is the html for the text box.

<input type="text" name='search' id="search" class="input-block-level" autocomplete="off" placeholder="search...">

Here is my script for the autocomplete function

<script>
  jQuery(document).ready(function($){
    $('#search').autocomplete({source:'autocomplete.php', minLength:2});
  });
</script>

Here is the php file

<?php


 if ( !isset($_GET['term']) )
exit;


$conn = odbc_connect('Abilis', 'infosysreader', 'Wilsons12'); 

$query = "SELECT TOP 10 [Del_ad1] FROM [Abilis].[dbo].[Customers] WHERE Del_ad1 LIKE    '%".$_GET['term']."%'";

$rs = odbc_exec($conn, $query);



$data = array();

for($i = 0; $i<odbc_num_rows($rs);$i++){
$row = odbc_fetch_array($rs, $i);

$data[] = array(
            'label' => $row['Del_ad1'],
            'value' => $row['Del_ad1']
);
}

// jQuery wants JSON data
echo json_encode($data);
flush();

Edit:

I found my error at the end of my html file. It was just a mistake on my part, the method I use above works fine.

stupid question....but shouldnt autocomplete be "on"? maybe I dont understand — Kylie
– Kylie, Commented Jun 6, 2013 at 18:50
the autocomplete there is the browsers autocomplete to use with previous entries. It doesn't have anything to do with the jQuery autocomplete. It doesn't work when it is on or off. — MayBeColin
– MayBeColin, Commented Jun 6, 2013 at 19:07
if there is browsers autocomplete that means that your PHP script is never executed. Have you tried my way with ajax call ? Is your URL correct? check your source URL — GGio
– GGio, Commented Jun 6, 2013 at 19:14
Nothing looks wrong with the URL and I have tried the ajax call, with no luck — MayBeColin
– MayBeColin, Commented Jun 6, 2013 at 19:18

GGio · Accepted Answer · 2013-06-07 13:01:17Z

1

Not sure what your problem is but since your PHP correctly returns json encoded string then problem is with autocomplete call. Try this and let me know if it makes any difference:

$('#search').autocomplete({
   minLength:2,
   source: function(request, response) {
       $.ajax({
         url: 'autocomplete.php', 
         dataType: 'json',
         data: { term : request.term },
         success: function(result) {
              response(result);
         }
       });
   }
});

Also try changing autocomplete="off" to autocomplete="on"

Remove the following from input element:

class="input-block-level" autocomplete="off" placeholder="search..."

and try with <input type="text" name='search' id="search" />

edited Jun 7, 2013 at 13:01

answered Jun 6, 2013 at 18:54

GGio

7,67311 gold badges48 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MayBeColin Over a year ago

I tried that script with no luck, also tried to turn the autocomplete on and off. With no luck unfortunately.

MayBeColin Over a year ago

No error messages at all. Nothing in the logs either. Not sure what is going on.

GGio Over a year ago

then try replacing jQuery(document).ready(function($){ with $(function() { this and is this script located in the same file as html input element? are you including js file if its outside of input element? try alert('a') before autocomplete do you get alert message ?

MayBeColin Over a year ago

It hits the alert when using my old code, but not with your ajax code.

GGio Over a year ago

because it was missing comma after minLength, try now

Collectives™ on Stack Overflow

Using jQuery-ui to autocomplete a text box with php and javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related