Autosuggest with 2D data?

[insuractive]

I have an application that provides autosuggest functionality on a field through an AJAX call.  Its pretty old code (pre-CF8) and I'm looking to update the tool to use some more current tech.  I've got my eye on the CF 8 autosuggest functionality now built into <cfinput>, the only problem is that I'm dealing with 2-dimensional data coming back from the AJAX call.

Let me explain:

1) Say the user starts typing into the text field txtFieldA

2) My tool does an AJAX call and returns the data in the following format:

     MATCH1 (DESCRIPTION1)

     MATCH2 (DESCRIPTION2)

     MATCH3 (DESCRIPTION3)

3) When the user selects the correct option, only the MATCH1 text is inserted into txtFieldA (the DESCRIPTION1 text is left out)

As far as I can tell, the autosuggest functionality built into <cfinput> won't handle 2D data, or selectively inserting only some of the returned data.  Does anyone know if there is a way to get this to work with the native CF8 autosuggest?  Or if there is another package that might provide this same functionality?

I'm familiar with the different tools out there for 3rd party autosuggest functionality (JQuery, Spry, etc) - I'm specifically looking for a package that will allow me to selectively insert only a portion of the returned data when an autosuggest option is selected.

Thanks!

- Michael

[CF_output]

Theoretically, I imagine you can do this, however you'll need to do some scripting as well.  To my knowledge, the CF8 autosuggest feature does not handle 2d data into the input.

So heres an idea..

You could make two lists, one with your description, and one with the data you would like to use when you submit your form.  Then based on a user event, you will need to update your input values.

So lets say we are searching for a state.  My first list would contain "Florida - The Sunshine State" and my second list would contain "Florida".

Now we would connect the autosuggest to the states with the description:

<cfinput type="text" name="state" autosuggest="#ValueList(states_descriptions)#">

Now write a script to check the value that was changed and update it to the value that you want:

<script language="javascript1.2" type="text/javascript">
    function runChange()
    {
       
        if (document.state_test.state.value == 'Florida - The Sunshine State')
        {
            document.state_test.state.value = 'Florida';
        }
    }
</script>

Of course, you will need to configure this with some real variables, but hopefully you get the point.

Now the problem is, you can't simply run an "onChange()" on the input field because it will end up running your function prior to updating the autosuggest value.  For example, if I start typing in "Flo" and then click the autosuggest "Florida - The Sunshine State", my onChange() function will recognize the value as "Flo" since the autosuggest hasnt officially ran yet.

So if you decide to try something like this, you'll need to run your function after the autosuggest has completed, such as on the form submit button, etc.

[insuractive]

Interesting idea, but it probably won't work for us due to the scalability issues - in order for that to work you would need to retrieve the entire list of possible autosuggest values first prior to creating the form field.  We're dealing with thousands of possible values, which is why we're doing the autosuggest as an ajax call (we don't even make the call until the user enters at least 3 characters) in order to reduce the size of the result set.  Because the data is compiled remotely and then returned to my application, I need to have a 2-dimensional data set returned so I can separate out the autosuggest value from the descriptive text for the form field insert.

The way our system currently works, we do something like this:

1) User enters text for autosuggest

2) System performs AJAX call to MyAutoSuggest.cfm, which returns my result set (Values|Description) as a JSON-formatted array of structures

3) My response handler JS function dynamically builds the autosuggest HTML and displays it to the user

4) When the user selects an option, it triggers another JS function which hides the autosuggest content and auto-fills just the value (no description text)

I appreciate the suggestion, CF_output!  Thank you for taking the time to outline a possible solution.

Are there any other ideas on how to accomplish this with only 1 ajax call using an existing autosuggest framework?

Thanks!

- Michael

[craigkaminsky]

Hi, Michael,

I was reading over the post and was curious about the returned JSON. You mentioned it's an array of structures that gets returned. What does your JSON look like? Is it different than returning an array of JavaScript objects? In theory (or practice!), a JSON array of structures could be identical to the array of objects but I am interested if there's a difference between them in JSON (and how that might play out in the client).

[insuractive]

Hi Craig,

That was a nominclature screw up on my part - I am returning an array of objects in JSON.  To be honest, I'm the data I'm returning actually contains some data in addition to the array I'm interested in (such as error codes in the event something goes south with my ajax processing page), but I could probably do without the ERROR code if I needed to.

For reference, the JSON my ajax call is returning is below:

{"ERROR":0.0,"CODES":[{"SOURCE_ID":"dm_nm_001","SOURCE_DESC":"First Item"},{"SOURCE_ID":"dm_nm_002","SOURCE_DESC":"Second Item"},{"SOURCE_ID":"dm_nm_003","SOURCE_DESC":"Third Item"},{"SOURCE_ID":"dm_nm_004","SOURCE_DESC":"Fourth Item"}]}

[craigkaminsky]

No screw up at all, Michael!

I thought that was probably the case (returning an array of objects). Is it correct that, you're after the source_id and source_des values as the two main pieces of the auto-suggest puzzle?

Assuming that's correct (let me know if not), I'm going to play around with this JSON this evening. I think there might be a way to simplify the JavaScript after it is returned to the client to make it easier to work with in the auto-suggest.

Cheers,

Craig

[insuractive]

Yep, those 2 items are exactly what I'm after!

[craigkaminsky]

Cool...I'll let you know if I come up with something worthwhile !

[craigkaminsky]

Hi, MIchael,

I'm not sure if it's exactly what you're looking for but I got a working auto-complete going with jQuery (1.3.2) that uses the CODES array in your JSON to populate the auto-complete list and places the second element of the CODES array in the form box when checked. I hope it helps!

Here's the setup and code I used:

SETUP:

Using a local site on my dev box, I have an index.html page and two folders: data and lib. The data folder contains the JSON file and the lib folder contains a sub folder called jquery, which contains my jquery library file(s).

CODE:

1: The JSON data

{

"ERROR":0.0,

"CODES":[

{"SOURCE_ID":"dm_nm_001","SOURCE_DESC":"First Item"},

{"SOURCE_ID":"dm_nm_002","SOURCE_DESC":"Second Item"},

{"SOURCE_ID":"dm_nm_003","SOURCE_DESC":"Third Item"},

{"SOURCE_ID":"dm_nm_004","SOURCE_DESC":"Fourth Item"}

]

}

Of course, this would be dynamically generated by the server in "real life" but, for our purposes, I am using the static value you provided yesterday.

2. The HTML/JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>JQuery Auto-Complete</title>

    </head>

    <body>

        <h1>JQuery Auto-Complete</h1>

          <div>

               <input type="text" id="search-text" />

          </div>

          <ul class="automcomplete"></ul>

     <script type="text/javascript" language="javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>

     <script type="text/javascript" language="javascript">

$(document).ready(

function(){

var $autocomplete = $( '<ul class="autocomplete"></ul>' ).hide().insertAfter('#search-text');

$('#search-text').keyup(

function()

{

// this should actually be a call via $.ajax to a server-side page. but using the static JSON for now

$.ajax({

'url' : 'data/auto_complete_data.json',

'data' : { 'search-text' : $( '#search-text' ).val() },

'dataType' : 'json',

'type' : 'POST',

'success' : function( data ){

if( data.CODES.length )

{

$autocomplete.empty();

$.each( data.CODES, function( index, val ){

$( '<li><li>' ).text( data.CODES[index].SOURCE_ID + " " + data.CODES[index].SOURCE_DESC ).appendTo( $autocomplete ).click(

function(){

$( '#search-text' ).val( data.CODES[index].SOURCE_DESC );

$autocomplete.hide();

}

);

} );

$autocomplete.show();

}

}

});

}

);

}

);

     </script>

    </body>

</html>

[insuractive]

Hi Craig,

Thanks for taking the time to put together a solution!  The logic is very similar to what I'm currently doing in the application (using JS code I built from scratch), but man does everything look slicker in JQuery!  Not to mention about a quarter of the lines of code! I just need to add functionality for the up/down arrow keys & enter key (to be able to select a "suggestion" from the list without using the mouse), but I definitely think this is something I can run with.  Thanks again for all your help!

- Michael

[craigkaminsky]

Hi, Michael,

Glad to help and do hope this is something that can get your rolling.

Personally, I really dig jQuery because it makes life with JavaScript SO much easier! And that's not to knock the many other excellent Ajax libraries out there. jQuery was what I first learned early last year, so it's what I use (and it's pretty darn excellent).

If you end up getting into jQuery, I used a book called "Learning jQuery" from Packt Publishing (www.packtpub.com) to get started -- yes, they left the "e" out of Packet. My book is for jQuery 1.2.x but there is a new version of this book for jQuery 1.3.x (Learning jQUery 1.3 -- http://www.amazon.com/Learning-jQuery-1-3-Jonathan-Chaffer/dp/1847196705/ref=sr_1_1?ie=UTF8&s=books&qid=1241198746&sr=8-1).

Anyway, my version of the book has a section devoted to auto-complete and I used this section as the basis for the example I provided. What I left out, but is in the book, are sections on keyboard navigation and handling arrow keys (just what you want to add!). I did a quick perusal of the ToC of the new book (for 1.3) and the auto-complete section is there as well.

If needed, I can retype the relevant code in those sections for you but, if you get into jQuery, I'd recommend getting a copy of Learning jQuery 1.3. It's an excellent way to get going with jQuery and, once you do, JavaScript will be fun...sort of !

Have a great weekend!

Cheers,

Craig

[insuractive]

Hi Craig,

Thanks for the offer, but I've figured out the arrow key navigation piece.  I'll definitely check out that book - thanks for the suggestion.  We're currently using JQuery in a couple places in our web applications, but I get the sense that I really need to re-conceptualize my idea of client-side process flow in order to truly get the most out of how JQuery works.  Previously, I was just using it as a short hand for my existing javascript techniques, but the power of the selector functionality is a little mind blowing.

This whole experience has shown me that I really need to dig back into the JQuery stuff.

Thanks again for all your help!

- Michael