Solved

How to use AUTOSUGGEST in an input field.

Posted on 2010-08-19
6
407 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

770 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