Can't click on any link

[underdpt]

Hi,

I'm implementing this (awesome) plugin on one site, and found that if I click on any result, it simply puts the name of the object inside the search input, but not opens the link (that's here).

<div class="unibox-suggest-cluster unibox-suggest-clientes unibox-3-entries unibox-single-suggestion-block">
  <h4>Clientes</h4>
  <div class="unibox-selectable">
    <a class="uniboxSearchContent" href="http://asistencia.mainsip.local/admin/clientes/1335">
      <span class="unibox-highlight">Opt</span>ima Trans S.L.</a>
    <div class="unibox-ca"></div>
  </div>
  <div class="unibox-selectable">
    <a class="uniboxSearchContent" href="http://asistencia.mainsip.local/admin/clientes/2326"><span class="unibox-highlight">Opt</span>ucci 2004, S.L.</a>
    <div class="unibox-ca"></div>
  </div>
  <div class="unibox-selectable">
    <a class="uniboxSearchContent" href="http://asistencia.mainsip.local/admin/clientes/1539">Centro Óptico Visual Azul Iris S.L.</a>
    <div class="unibox-ca"></div>
  </div>
</div>

I've tried changing the option disableEventPropagationHtml with no luck.

The only event I see related is the mousedown that's attached to unibox-selectable.

[ddsky]

Hi, thanks for the kind words.

You might need to implement the enterCallbackResult:

settings.enterCallbackResult = function(query, href){
     if(href!==undefined){
        window.location.href = href;
    }   
}

[underdpt]

That only works when pressing the Enter button, not when clicking with the mouse.

This is my javascript:

$("#searchBox").unibox({
  // these are required:
  suggestUrl: '{{ route('admin.buscador') }}?q=', // the URL that provides the data for the suggest
  // these are optional:
  searchBoxContainerSelector: undefined, // suggest will be attached to this container, by default it will be the parent of the search input (e.g. #searchBox)
  instantVisualFeedback: 'all', // where the instant visual feedback should be shown, 'top', 'bottom', 'all', or 'none', default: 'all'
  throttleTime: 100, // the number of milliseconds before the suggest is triggered after finished input, default: 300ms
  highlight: true, // whether matched words should be highlighted, default: true
  animationSpeed: 100, // speed of the animations, default: 300ms
  // callback on what should happen when enter is pressed while the focus is on one of the suggests, default: undefined, meaning the link will be followed
  enterResultCallback: function(query, href){
    if(href!==undefined){
        window.location.href = href;
        }
    },
  minChars: 3, // minimum number of characters before the suggests shows, default: 3
  maxWidth: 800, // the maximum width of the suggest box, default: as wide as the input box
  disableEventPropagationHtml: true  // disable click event propagation from search (suggest) box to html elements
});

[JVankat]

Hi,

enterResultCallback is also attached to mousedown event on .unibox-selectable. I've tested with your code and it works. Could you give me more details (e.g. browser information) so I can look into your issue?

[underdpt]

I'm sorry I've been unable to do more tests. I've tried with firefox, chrome and chrome mobile and the issue is the same. I think it has something to do with the z-index of the outer elements, but I've been unable to do more tests.

I'll be out of the office for the next weeks, i'll do more tests on arrival and post more code if it helps.

[underdpt]

Sorry for the late response. I was getting crazy with this so I gave me a few months so I didn't get crazy.

And, after a fresh view, I foud the problem: it's with the highlighted items. In my results, it may be some items with no highlighted words because of my search engine looks on some linked tables, but only returns results from the main table, so some items may not contain the search phrase.

In those cases, If I click on a result with highlighted words, it doesn't works. If I click on a result without highlighted words, it works as expected. And, strange as it sounds, if I disable higlighting, the result is the same.

I don't know if it's related, but I would expect that clicking on a row would open the link, but I have to click on any text, as the <a> tag only targets the text and doesn't fills the entire row.