Solved

How to use AUTOSUGGEST in an input field.

Posted on 2010-08-19
6
410 Views
Last Modified: 2012-05-10
I'm trying to create a page where the user inputs either a first or last name and it returns suggested matches using the autosuggest tag in CFML.  

On the first screen, the user begins typing and then the suggested entries pop-up

 autosuggest.cfm
When a staff member is selected, I am getting the wrong display for the name - I get the first 2 letters:

 wrong display of staff name
Here are my issues and I don't know what to do about them... Any insight you could provide would be greatly appreciated. Feel free to ask any questions you would need for clarification.

1) When a user is selected from the dropdown, I would like the full name of that person to be displayed. (I don't know which variable I would place there - right now I'm using the staffname, which is why I'm only getting whatever I enter in the input.
2) I don't like that little "wheel" that displays to the right of the input box. Is there a way to disable that?
3) I'm currently using "displayname" as the search field in the query. What I need to use are fields first (for first name) and last (for last name) and search any combinations one might provide.

For example if they typed "tra" the results would be:
brondin, tracy
evertran, john
trahan, shane

I've include jquery and ajax in on this as there's almost always an - if not easier - equal solution to a CFML problem in those languages.
__________________________________________________

this is my page autosuggest.cfm 

<cfparam name="staffname" default="">

<cfform method="post" action="autosuggest.cfm">
Staff:
<cfinput type="text"
     name="staffname"
     autosuggest="cfc:autosuggest.lookupStaff({cfautosuggestvalue})"
     onBlur="this.form.submit()">
</cfform>
<cfoutput>#staffname#</cfoutput>
__________________________________________________

Here's my autosuggest.cfc

<cfcomponent output="false">
<cfset THIS.dsn="rtidirectory">
<!--- Lookup used for auto suggest --->
<cffunction name="lookupStaff" access="remote" returntype="array">

<cfargument name="search" type="any" required="false" default="">
<!--- Define variables --->
<cfset var qry_getStaff="">
<cfset var result=ArrayNew(1)>

<!--- Do search --->
<cfquery datasource="#THIS.dsn#" name="qry_getStaff">
SELECT displayname
FROM individuals
WHERE displayname LIKE '#ARGUMENTS.search#%'  and emailstatus = 'active' 
ORDER BY displayname
</cfquery>

<!--- Build result array --->
<cfloop query="qry_getStaff">
<cfset ArrayAppend(result, displayname)>
</cfloop>

<!--- And return it --->
<cfreturn result>

</cffunction>

</cfcomponent>

Open in new window

0
Comment
Question by:traport
  • 3
  • 3
6 Comments
 
LVL 16

Accepted Solution

by:
duncancumming earned 500 total points
ID: 33491209
Well firstly I'd say change the query to search both first and last name fields, instead of displayname (which I assume is just the 'lastname, firstname' concatenation of those fields anyway).  It's not clear from your quest, but you do have those fields in your individuals table, right?

WHERE (firstname LIKE '%#ARGUMENTS.search#%'  
OR lastname LIKE '%#ARGUMENTS.search#%'  )
and emailstatus = 'active'

Also you really want to use cfqueryparam on that query!

Looking at your example where you say you want John Evertran, you're going to have to change it to have the % wildcard on both sides of the search term, otherwise you won't get him in your results.


0
 

Author Comment

by:traport
ID: 33491587
Okay, thanks you - great suggestions that I'll put in place!

I figured out #2. My main problem is #1. How can I get the one they select to display on the page. It ("staffName") is  just not showing up as a variable in my form.

Thanks for your response.
0
 
LVL 16

Assisted Solution

by:duncancumming
duncancumming earned 500 total points
ID: 33492665
I'm not sure you need this part:
<cfoutput>#staffname#</cfoutput>

It should be the case that when the user selects a name from the autosuggest list, that then populates the value in the cfinput box.

Or is it the case that you want the name to be displayed outside of that box as well?  If so, I'd say put it in a div or span with an ID, for starters.  Then use some javascript to change the value of that div on the cfinput's onblur action I would say


0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:traport
ID: 33530143
I'm so sorry it's taken me so long to respond (I've been out of the office).

For some reason it's *not* populating the cfinput box upon selection. That's the issue I can't seem to resolve. I'm not getting the value to display it anywhere.
0
 
LVL 16

Expert Comment

by:duncancumming
ID: 33539252
Just a suggestion - you tried taking the onBlur off?
0
 

Author Closing Comment

by:traport
ID: 33591031
Thanks... wanted to close this out and give you points since you tried to help me out.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question