Páginas

miércoles, 27 de marzo de 2013

[Solved] jQuery UI Autocomplete accent insensitive for catcomplete

jQuery autocomplete is great and works great, but has a bug. Its catcomplete version is case sensitive.

It works...


... but It doesn't work...

I can't be able to find a solution searching on the web and decide to hack the jQuery plugin. I built a solution that works fine:

First of all you have to add a new property to the data array with the possible values to find. this new property will have the label value without accents:

var data = [
      { label: "camión", category: "Cat1", labelNoAccents: "camion" },
      { label: "coche", category: "Cat1",  labelNoAccents: "coche"}
]

After that you have to hack the jquery-ui.js file:

Find $.extend( $.ui.autocomplete, {
Find filter: function(array, term) {

Here is where the filter is done. The variable term is the text yhe user has typed in the search box. Replace all accents:

term=term.replace("á","a");
term=term.replace("ó","o");
...

After that change the comparison from the label property to your new property without accents:

return matcher.test( value.label || value.value || value );
return matcher.test( value.labelNoAccents || value.value || value );

This will find user's search term without accents in your values without accents.

That's all.

Thanks @genisbarrera for his help.

lunes, 28 de enero de 2013

Bootstrap tabs and ASP.NET AJAX postback

When you are using Twitter Bootstrap tabs combined with AJAX ASP.NET and some content inside the panes is firing a page postback then you have a problem. If you are viewing the content of the second pane and do a postback, then  the first tab and he first panel will be actived.

Imagine both panels have sorted tables. If the user is viewing the table of the second tab and sorts the table, the focus comes back to the first pane after the postback.

This is how I built a solution:
  • Make the pills accessible from code behind adding an ID and runat="server".
  • Make the tabs panes accessible from code behind  adding an ID and runat="server".
  • Add the ID of the pane that the table belongs to to the Command Name of the element that is sorting the table, for example a linkbutton:
  • On the linkbutton sort click event call the funtion that binds the data and set the active pane using the function I've called ManageTabsPostBack.



I'm back, again