Solved

How to use AUTOSUGGEST in an input field.

Posted on 2010-08-19
6
399 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now