Skip to main content
I
insuractive
Inspiring
April 29, 2009
Question

Autosuggest with 2D data?

  • April 29, 2009
  • 1 reply
  • 2127 views

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

    This topic has been closed for replies.

    1 reply

    A
    Anonymous
    April 30, 2009

    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.

    I
    insuractiveAuthor
    Inspiring
    April 30, 2009

    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

    C
    craigkaminsky
    Inspiring
    April 30, 2009

    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).

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices