Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 435
  • Last Modified:

How to use AUTOSUGGEST in an input field.

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
traport
Asked:
traport
  • 3
  • 3
2 Solutions
 
duncancummingCommented:
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
 
traportAuthor Commented:
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
 
duncancummingCommented:
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
traportAuthor Commented:
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
 
duncancummingCommented:
Just a suggestion - you tried taking the onBlur off?
0
 
traportAuthor Commented:
Thanks... wanted to close this out and give you points since you tried to help me out.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now