Javascript events and Typeahead user interaction

General questions
1

Hey Piwik community,

I’m working on a side project tinkering around with Twitter Typeahead.
Currently using Typeahead 0.9.3, and extracting data from two different .json files using prefetch.

Here is the the script code:


<input class="both" type="text" placeholder="Data1+ Data2" spellcheck="false" dir="auto">
> 
> 
>     </section>
>         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
>         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
>         <script src="typeahead.js"></script>
>         <script src="js/hogan.js"></script>
> 
>         <script>
>       //applying typeahead to text input box: both
>            $('.both').typeahead([
>               {
>                 name: 'data1',
>               //data source
>               prefetch: 'data1.json',
>               // template for each suggestion
>                 template: [
>                 '<p class="name">{{name}}</p>',
>                 '<p class="price">{{price}}</p>',
>                 '<p class="desc">{{description}}</p>'
>               ].join(''),
>             //
>               engine: Hogan
>               },
>               {
>                 name: 'data2',
>                 prefetch: 'data2.json',
>                   template: [
>                 '<p class="name">{{name}}</p>',
>                 '<p class="price">{{price}}</p>',
>                 '<p class="desc">{{description}}</p>'
>               ].join(''),
>               engine: Hogan
>               }
>             ]);
>             </script>

So the user query is being searched from both data files. It is displayed as such: http://i.imgur.com/dW3QLgA.jpg

CSS: http://jsfiddle.net/Nk3ym/

The orange background is the data from data1.json and the other one is data1.json. Anyway, I installed Piwik in hopes of capturing user interaction data when they click on the data that is displayed. Right now, if the user clicks on one of the search results, the value is populated back into the original input field (it is not linked to another URL):

<input class=“both” type=“text” placeholder=“Data1+ Data2” spellcheck=“false” dir=“auto” onClick="javascript:_paq.push([‘trackPageView’, ‘TESTING’]);">

How can I use Piwik to track what users are clicking on? Would this require a custom click ‘Event’?

Any and all help is appreciated :slight_smile: Thank you!