Hello,

I have a search form with an autocomplete function. At the moment, it will fill the form with the value in the autocomplete, but you have to hit search after it is filled. How would I go about filling the form input and submitting the form onClick? Code is below...

The jQuery

function suggest(inputString){
        if(inputString.length == 0) {
            $('#suggestions').fadeOut();
        } else {
        $('#search').addClass('load');
            $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').fadeIn();
                    $('#suggestionsList').html(data);
                    $('#search').removeClass('load');
                }
            });
        }
    }

    function fill(thisValue) {
        $('#search').val(thisValue);
        setTimeout("$('#suggestions').fadeOut();", 300);
                    }

The onClick event

PHP Code:

echo '<ul id="autolist">';
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.addslashes($result->Last_Name).'\');"><p>'.$result->Last_Name.', '.$result->First_Name.'</p></li>';
                     }
echo '</ul>'; 


Welcome to AQ!
Do surf around our sub forums for more information.

Well, that wasn't much of a solution. Anyone else have some insight?

document.formname.submit(); after the fill is complete

Thanks, chrishirst. But something isn't clicking.

I tried adding it inline:

<li onClick="fill(\''.addslashes($result->Last_Name).'\'); document.searchForm.submit();" >

And to the external script:

    function fill(thisValue) {
        $('#search').val(thisValue);
        setTimeout("$('#suggestions').fadeOut();", 300);
        document.searchForm.submit();
                    }

Did I miss something?

A URL would be more of a help.

Here's an example http://craigwermert.com/dummy/index.php

This is the full PHP file that the onClick event is in:

PHP Code:

<?php
   $db = new mysqli('localhost', 'craig' ,'cabana', 'admins');
    
    if(!$db) {
    
        echo 'Could not connect to the database.';
    } else {
    
        if(isset($_POST['queryString'])) {
            $queryString = $db->real_escape_string($_POST['queryString']);
            
            if(strlen($queryString) >0) {

                $query = $db->query("SELECT Last_Name, First_Name, id FROM admins WHERE Last_Name LIKE '$queryString%'");
                if($query) {
                echo '<ul id="autolist">';
                    while ($result = $query ->fetch_object()) {
                         echo '<li onClick="fill(\''.addslashes($result->Last_Name).'\'); document.searchForm.submit();" ><p>'.$result->Last_Name.', '.$result->First_Name.'</p></li>';
                     }
                echo '</ul>';
                    
                } else {
                    echo 'Houston, we had a problem...';
                }
            } else {
                // do nothing
            }
        } else {
            echo 'There should be no direct access to this script!';
        }
    }
?>

What FF javscript error console is showing points towards tthe mix of JQuery and REAL javascript being the problem.

I don't use any of these frameworks 'cos it takes me longer to work out how to use them, than it does to write the code in the first place!

so you need to work how to write the submit function in jquery.