[jQuery] autocomplete - custom pagination + jquery UI autocomplete charade
caveat: this is actually my second post, the first one I forgot to put
autocomplete at the title that might result in the author not being
able to find it.
Hi,
I am trying to add a pagination capability to my autocomplete
I am having trouble when I click the pagination link that I
dynamically added , the steps that I do are:
setData {page:next_page} -> flushCache and then trigger a search
event, but the setData is not setting the extraParams. As in, it's not
sending the page.
help?
this is my autocomplete call:
$('input [type=text]'). autocomplete(
{
url:'/ajax/search',
cacheLength:30,
width:380,
formatItem:function(results,index,total)
{
var zebra=true;
results=eval('('+results+')');
if (results.length<=0)
{
$('#ac_extra_menu').hide();
return '<li> found nothing</li>';
}
if (!$('#ac_extra_menu').length)//if we
dont find the extra menu for pagination then add it
{
$('div.ui-autocomplete-
results').prepend(
'<div id="ac_extra_menu">'+
'Showing <span
id="ac_current_page"></span> of <span id="ac_total_result"></span>'+
'<a href="#"
id="ac_paginate_left"><img src="/assets/img/header/arw_kr.png" /></
a>'+
'<a href="#"
id="ac_paginate_right"> <img src="/assets/img/header/arw_kn.png" /> </
a>'+
'</div>'
);
$('#ac_paginate_left').click(
function()
{
//paginate left
}
);
$('#ac_paginate_right').click(
function()
{
$('#search_box
input[type=text]')
.autocomplete('setData',
{page:2}).
autocomplete('flushCache')
.autocomplete('search');
return false;
}
);
hack_to_style_ac=true;
}
list_of_elements='';
for (var i=0;i<results.length;i++)
{
zebra=!zebra;
list_of_elements+='<li class="'+
(zebra?'zebra':'')+'"><a onclick="window.location=$(this).attr(\'href
\');" href="/map/index/'+results[i]['location_x']+
'/'+results[i]
['location_y']+'"><img src="/assets/img/header/thumb_'
+
(Math.floor(Math.random()*2))+'.png" />'
+cut_text(results[i]
['name'])+ ' - of - '
+results[i]
['username']+'</a></li>';
}
$('#ac_total_result').text(results.length);
return list_of_elements;
}
}
);