how to get a hover event on a typeahead

Greetings,
I'm trying to get capture the typeahead hover in the drop down.

My json is formatted as:
 [{"ParcelID":"12345", "address":"123 anytown st. Anywhere ST 12345"}, {...}]

Open in new window


Below is my standard code:


	var addresses = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('Address'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
		local: addresslist
	});
	
	addresses.initialize();
	
	
	$('.typeahead').typeahead(null, {
	  name: 'addresses',
	  source: addresses.ttAdapter(),
	  displayKey: 'Address'
	}).on('typeahead:selected', function(event, data){
        $('.typeahead').val(data.ParcelID);        
		console.log(data.ParcelID);
	}).on('mouseover', '.tt-suggestion', function($e) {
		  console.log($e);
	});

Open in new window


The mouseover is not working.

I tried a second way below:

	
	$('.tt-suggestion').mouseover(function(){
		console.log("hitme");
	});

Open in new window


which didn't work either.

They typeahead gives off the first five entries associated with what is being typed.  It shows in the drop down.  the address is associated in the typeahead, while the key is the ParcelID.

the code above captures the ParcelID when the selection is made, which engages an object elsewhere on the page.  I also want to engage objects on the page associated with what's being highlighted prior to selection.

Can this be done?
Thanks
LVL 9
Evan CutlerVolunteer Chief Information OfficerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Marco GasiFreelancerCommented:
Have you tryed to use hover() event?
	$('.tt-suggestion').hover(function(){
		console.log("hitme");
	});

Open in new window

0
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
Yep.
I've also tried:

	$('.typeahead').typeahead(null, {
	  name: 'addresses',
	  source: addresses.ttAdapter(),
	  displayKey: 'Address'
	}).on('typeahead:selected', function(event, data){
        $('.typeahead').val(data.ParcelID);        
		console.log(data.ParcelID);
	}).on('hover', '.tt-suggestion', function($e) {
		  console.log('hitme1');
	});

	
	$('.tt-suggestion').hover(function(){
		console.log("hitme");
	});

Open in new window


no go.
0
Marco GasiFreelancerCommented:
Can you post your  markup?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
sorry....don't understand the question.
0
Marco GasiFreelancerCommented:
The html page, or at least the section of the html page where is the element with class .tt-suggestion.
Or even better, if possible, a link to the live page.
After all, jquery code seems to be correct, so it's probably the selector which is wrong.
0
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
Here's the page:
http://live2.offrs.com/buyerherodev/zipaddnav.html?zip=20001

The phase right now that I'm working on as I'm typing is to engage the informationbox for the icon when an address is selected.

What I want to do is highlight the marker when an address is hovered.  This gives a nice idea of where the potential address is located.  I'm changing the marker icons also.

Thanks much.
0
Marco GasiFreelancerCommented:
I've tried to choose '919  FLORIDA AVE NW APT 603 WASHINGTON, DC 20001-5048' but nothing happens.
More important, exploring both source and Generated source of your page I've not been able to find any element with class '.tt-suggestion', so I'm a bit confusing: how can raise an event an element which doesn't actually exist?
0
Marco GasiFreelancerCommented:
Sorry, I find it: I made a typo :-(
Trying to look for it within Firebug...
0
Marco GasiFreelancerCommented:
Ok, now you have two blocks of code whcih culd conflict each other. Try to comment the first one (the longer one) and leave just the shorter:

	$('.tt-suggestion').hover(function(){
		console.log("hitme");
	});

Open in new window

0
Marco GasiFreelancerCommented:
You can also try this type of syntax:

	$(document).on('mouseover', '.tt-suggestion', function(){
		console.log("hitme");
	});

Open in new window


I used many times to make jquery work with element created dinamically and even if your tt-suggestion is not created dinamically, it could worth to try.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
This got it perfectly for me.
Thanks much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.