在textarea中自动完成多个结果

Question

I think it's simple enough. I grab some results from an array pulled from a PHP while loop.

Problem is it only allows 1 result. When I search for another string, it replaces the old one.

I've tried to come up with a solution on my own, but I think my brain is burnt out and I just cannot seem to come up with a decent solution.

So, here's the script:

<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            $('#suggestions').hide();
        } else {
            $.post("ajax-search.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }
</script>

Here's the HTML:

               <form>
                <textarea cols="80" rows="2" id="faq_search_input" name="query" dir="rtl" disabled></textarea>
                <textarea id="inputString" onkeyup="lookup(this.value);" onblur="fill();" cols="80" rows="2" placeholder="Write here"></textarea>
                <div class="suggestionsBox" id="suggestions" style="display: none;">
                    <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                    <div class="suggestionList" id="autoSuggestionsList">
                        &nbsp;
                    </div>
                </div>
            </form>

And here's the PHP:

<?php 
include("config.inc"); //Including our DB Connection file

if(isset($_POST['queryString'])) {
    $queryString = $db->real_escape_string($_POST['queryString']);
        if(strlen($queryString) > 0) {
            $query = $db->query("SELECT * FROM directions WHERE eng_dir LIKE '%$keyword%' OR attr LIKE '%$keyword%'");

            if($query) {
                while ($result = $query ->fetch_object()) {             
                    echo '<li value="'.$result->dir_id.'" onClick="fill(\''.$result->eng_dir.'\');">'.$result->eng_dir.'</li>';
                }
            }
        }
}
?>

I tried using preg methods for MySQL, but I think I'm doing something wrong. The thing is, I can do this via jQuery quite easily, but because of the number of elements I wanted to use MySQL. It was because of this that I'm now stuck between a rock and a hard place.

Even a simple push in the right direction is okay. I know I must be missing something glaringly obvious.

Answer 1

as i understand i think you have to append your result with .appendTo() on every search instead of using html() because html() replaces all the data on the targeted id/class with the new one.

$.post("ajax-search.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $(data).appendTo('#autoSuggestionsList');
            }
        });