Solved

How to use AUTOSUGGEST in an input field.

Posted on 2010-08-19
6
415 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

 

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

More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

Question has a verified solution.

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

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…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
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…

729 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