8
главные изменения относительно предыдущей версии на jquery.autocomplete от Joern Zaefferer:
1. при onclick мышкой на не пустой строке поиска происходит поиск
2. строка поиска сохраняется при переходе к выбранному товару и... см. п.1. Это реально удобно, как оказалось
.3. Куда более открытая архитектура, дающая больше возможностей, хотя и не поддержанная (пока?) внятной документацией. Либо я хреново ее читаю, но конкретно забибикался с пониманием подмены _renderItem и _renderMenu, а как их подключать через $.widget так и не понял.
Внимание! Если у Вас jquery-ui версии 1.10 и выше, то закомментируйте строки для 1.8-1.9 и раскомментируйте для 1.10.
Установка:
==========
1. скопировать
ui-autocomplete.php -> корень сайта
2.В core/tpl/user/[свой шаблон]/head.tpl.html
2.1 прописать загрузку библиотек jquery и jquery-ui, если они еще не прописаны.
например
<link rel="stylesheet" type="text/css" href="http://ajax.googleap...jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleap...n.js"></script>
<script type="text/javascript" src="http://ajax.googleap...n.js"></script>
2.2 после строки
{* подключение скриптов *}
вставить
{* живой поиск *}
{literal}
<style>
.ui-autocomplete-loading {background: white url('/data/admin/loader.white.gif') right center no-repeat;}
ul.ui-autocomplete {z-index:3!important;}
.my_odd {background: #eee;margin-top:1px!important;}
</style>
<script>
$(function() {
$( "#searchstring" ).autocomplete({
source: "/ui-autocomplete.php?limit=11&cID={/literal}{$current_currency}{literal}",
minLength: 3,
focus: function( event, ui ) {$("#searchstring").val( ui.item.value );return false;},
select: function( event, ui ) {
// window.location = ui.item.url;
$('#searchstring').val(ui.item.search);
$('#formpoisk').attr('action',ui.item.url);
$('#formpoisk').attr('method','post');
$('#formpoisk').submit();
}
});
$( "#searchstring" ).data("autocomplete")._renderMenu = function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {that._renderItem( ul, item );});
$( ul ).find( "li:odd" ).addClass( "my_odd" );
// $( ul ).find( "li:even" ).addClass( "my_even" );
};
$( "#searchstring" ).data("autocomplete")._renderItem = function(ul, item) { // для jquery-ui 1.8-1.9
//.data( "ui-autocomplete" )._renderItem = function( ul, item ) { // для jquery-ui 1.10+
return $("<li></li>")
.data("item.autocomplete", item) // для jquery-ui 1.8-1.9
// .data("ui-autocomplete-item", item) // для jquery-ui 1.10+
.append(liFormat (item,$("#searchstring").val()))
.appendTo(ul);
};
});
function liFormat (item,term) {
if (item.type == '0')
return "<a><table cellpadding='0' cellspacing='5'><tr valign='middle'><td align='right' width='50' rowspan='2'><img height= '40' vspace='2' hspace='2' title='"
+item.name+"' src='"+item.filename+"'></td><td>"+highlight(item.name,term)+"</td></tr><tr><td>"+item.price+"</td></tr></table></a>";
else if (item.count-item.limit>0)
return "<a><table cellpadding='0'><tr valign='middle'><td>Это первые "+item.limit+" из "+item.count+".<br>Показать все?</td></tr></table></a>";
else if (item.count > 1)
return "<a><table cellpadding='0'><tr valign='middle'><td>Это все найденные.<br>Показать?</td></tr></table></a>";
else return "";
}
function highlight (value, term) {
var aterm = term.trim().split(' ');
for (var key in aterm)
value = value.replace(new RegExp("(?![^&;]+(?!<[^<>]*)(" + aterm[key].replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+
return value;
}
</script>
{/literal}
3.В core/tpl/user/[свой шаблон]/index.tpl.html
3.1 строку
<input type="text" name="searchstring" class="pform" value="{$searchstring}"></td>
заменить на
<input type="text" name="searchstring" class="pform" id="searchstring" value="{if $smarty.post.searchstring}{$smarty.post.searchstring}{else}{$searchstring}{/if}" onclick="$('#searchstring').autocomplete('search',$('#searchstring').val())" placeholder="найдется все : введите артикул или название товара"></td>
PS. Посмотреть, как оно работает можно традиционно на сайте в подписи
.
Прикрепленные файлы
-
ui-autocomplete.php 2.49К
94 Количество загрузок:
