Jquery ui issue with php/mysql

Question

Im having diffiuclty getting the Jquery UI to work with php,mysql. below is the basic jquery UI code for the autocomplete and my HTML form

<script type="text/javascript">

    $("#criteria").autocomplete({
    source: "includes/keywords.php",
    dataType: "json",
    minLength: 2,//search after two characters

    });
</script>

  <?php echo "<form class='docs' action='".$_SERVER['PHP_SELF']."' method='post'>"; ?>
                      <fieldset>
                          <input type="text" name="criteria"  id="criteria"  />
                          <input type="submit" name="submit" id="submit" value="search" />
                      </fieldset>
                  </form>

heres the php file

<?php

try{
    $conn = new PDO(DB_HOST, DB_USER, DB_PASS);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare('SELECT keywords FROM table_name WHERE keywords LIKE :input');

    //Execute the sql
    $stmt->execute(array(':input' => '%'.$_GET['term'].'%'));

    //Get array containing all of the result rows
    while($row = $stmt->fetch()){
        $row_set[] = $row['keywords'];//build an array

    }


}catch(PDOException $e){
    echo 'ERROR: ' . $e->getMessage();
}

echo json_encode($row_set);//format the array into json data
?>

I do get output but for some reason it outputs all the information like ["keyword a","keyword b"] at the top of my web page which I think is because thats where the jquery ui is being called. I have tested my database connection and its working ok and have also tested out the jquery UI demo on my website which works fine. The problem (I think) seems to be within the php file

Any help would be greatly appreciated

Sounds to me like you are missing the css for the autocomplete suggestions (.ui-autocomplete) — Gerald Schneider
– Gerald Schneider, Commented Oct 8, 2012 at 13:59
I dont think that is the issue because I done a quick test with the demo on the jquery ui website and it works ok on my website. I think the issue lies somewhere within the php file — Greyhamne
– Greyhamne, Commented Oct 8, 2012 at 14:50

Samuel · Accepted Answer · 2012-10-08 13:55:40Z

3

In your code, you're trying to call autocomplete on an element before that element has been loaded in the DOM document. You should wrap your script with $(document).ready(), like so:

$(document).ready(function() {
    $("#criteria").autocomplete({
    source: "includes/keywords.php",
    dataType: "json",
    minLength: 2,//search after two characters

    });
});

This will make sure that the criteria element has actually loaded before trying to make it an autocomplete.

answered Oct 8, 2012 at 13:55

Samuel

17.3k6 gold badges65 silver badges77 bronze badges

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

1 Comment

Greyhamne Over a year ago

Thanks for the reply, I have added what you have suggested but I still get nothing when trying the autocomplete. Can you suggest any tools I can use to check to make sure the source file is being seen aswell as whats being passed via the $_GET['term']

Collectives™ on Stack Overflow

Jquery ui issue with php/mysql

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related