jQuery Autocomplete again

JavaScript
1

Howdy,

Been trying to use an ‘autocomplete’ function, with sending the hidden value of an ID via the hidden field plus displaying different string in the input field, vs. the one from the drop down menu suggested.
Thanks to this entry (http://www.sitepoint.com/forums/showthread.php?652285-jQuery-autocomplete-working-Need-to-get-the-row-ID-into-hidden-form-field#3) a lot of possible headaches of mine were spared - thank you so much for that, mgm_03!

Now, been trying to get a little bit more sophisticated and have THREE states:

  1. one that shows the drop down formatted to my needs, with all the classes or styles attached - already accomplished
  2. one that shows pure text selected (*)
  3. one that passes an ID of the selection, the one that is most important for the search query - already accomplished

*) as of now something like this is shown in the search input field upon selection: <span style=“color: red”>2365</span> while I need nothing but 2365 alone!

I have re-done my PHP bit and have now three segments (only for testing purposes, not what I really want to get but the field names are for real):

    while($row = mysql_fetch_array( $sql )) {
        echo '<span style="color: red";>' . $row['postcode'] . ', ' . $row['suburb'] . '</span>               |             ' . $row['state'].', ' . $row['suburb'] . '            |               '.$row['id']."\
";
    }

yet still, I have no idea how to make this second array to be displayed in the input field once the suggestion is selected. As of now, when I select anything from the suggested list, the input field stays empty.

The JS piece:

    $().ready(function() {
    	$("#sp").autocomplete("<?php echo get_bloginfo('template_directory') ?>/auto/db.php", {
    		width: 485,
    		matchContains: true,
    		mustMatch: true,
    		minChars: 2,
    		selectFirst: true,
        	formatItem: function(data, i, n, value) {
        		return  value.split("|")[0];
        	}

     });

    $("#sp").result(function(event, data, formatted) {
    	var hidden = $("#subID");
    	hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[2]);
    });

Do I make any sense here?

I have, today, visited about gozillion sites that told me all about ‘formatResult’, ‘formatItem’ etc, yet I am not a tiny bit smarter about the issue than I was when I woke up last time.

Your input would be greatly appreciated!
Thanks,
g

2

If someone was interersted how to accomplish that, here’s the code:


    <script type="text/javascript">
    $(document).ready(function() {
        $("#sp").autocomplete("<?php echo get_bloginfo('template_directory') ?>/auto/db.php", {
            minChars:2,
            width: 485,
            autoFill:false,
            matchContains: true,
            formatItem: function(row) {
                return row[0];
            },
            formatResult: function(row) {
                return row[1];
            }
    });

    $("#sp").result(function(event, row, formatted) {
    	var hidden = $("#subID");
    	hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + row[2]);
    });

    });

    </script>