Question

to keep things simple, I have jquery autocomplete working, what is the best way to approach, joining/displaying a multiple rows from the array in the same input field.

My php looks like this

$return_arr = array();

/* If connection to database, run sql statement. */
if ($conn)
{
    $fetch = mysql_query("SELECT * FROM alltickets where name like '%" . mysql_real_escape_string($_GET['term']) . "%'");

    /* Retrieve and store in array the results of the query.*/
    while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
        $row_array['id'] = $row['id'];
        $row_array['value'] = $row['name'];
        $row_array['thedate'] = $row['date'];

        array_push($return_arr,$row_array);
    }
}

/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

My html page looks like

>Please enter what you are looking for</p>

<p class="ui-widget">

<label for="event">Please start entering your event </label>

<input type="text" id="event"  name="event" /></p>

<input type="hidden" id="mysqlid" name="mysqlid" />


<p><input type="submit" name="submitBtn" value="Submit" /></p>

</fieldset>
</form>

<script type="text/javascript">
$(function() {

            $("#event").autocomplete({
                source: "autocomp.php",
                minLength: 2,
                select: function(event, ui) {
                    $('#mysqlid').val(ui.item.id);
                }
            });

        });
</script>

Whats the most effective way to get “date” to be displayed in the text input field named event, right after “name”

so right now If I search, “cam” result will look as so

camera

I want result to look like

camera 17/09/2013

I can see there are a few ways to do this, whats the best way? Thank you

Answer 1

The easiest way is probably to do it in the select event handler. Remember to prevent the default action of the event as well:

$("#event").autocomplete({
    source: "autocomp.php",
    minLength: 2,
    select: function(event, ui) {
        event.preventDefault();
        this.value = ui.item.value + " " + ui.item.thedate;

        $('#mysqlid').val(ui.item.id);
    }
});

Example: http://jsfiddle.net/J5rVP/33/

---

If you want to display the date inside the list of suggestions, you have a few options:

1. Populate the value property with the entire string you want displayed (do the work on the server)
2. Manipuate the response you get from the server to populate the value property correctly
3. Override the _renderItem function to display the items the way you’d like.

In your case, it seems like #3 is probably the best way to go, so here’s how you would do that:

$("#event").autocomplete({
    source: "autocomp.php",
    select: function (event, ui) {
        event.preventDefault();
        this.value = ui.item.value + " " + ui.item.thedate;
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + " " + item.thedate + "</a>")
        .appendTo(ul);
};

Example: http://jsfiddle.net/J5rVP/34/