CODEWITHSUNDEEP
phpmysqljquery-ui
Greyhamne
Greyhamne

Reputation: 53

Jquery ui issue with php/mysql

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

Upvotes: 0

Views: 154

Answers (1)

Samuel
Samuel

Reputation: 17171

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.

Upvotes: 3

Related Questions