From 3763917d81b88fb2639341fdeaee104529601c8f Mon Sep 17 00:00:00 2001 From: avl Date: Mon, 18 May 2009 14:46:32 +0300 Subject: [PATCH] Add self suggestbox --- ipf/admin/media/js/jquery.suggestbox.js | 236 ++++++++++++++++++++++++ 1 file changed, 236 insertions(+) create mode 100644 ipf/admin/media/js/jquery.suggestbox.js diff --git a/ipf/admin/media/js/jquery.suggestbox.js b/ipf/admin/media/js/jquery.suggestbox.js new file mode 100644 index 0000000..1564b93 --- /dev/null +++ b/ipf/admin/media/js/jquery.suggestbox.js @@ -0,0 +1,236 @@ +(function($){ + $.fn.suggestbox = function(opt){ + var options = $.extend({ + animate: true, + inputWidth: 100, + delayDropDown: 500, + url: '/data.php', + reqest_method: 'GET', + zindexDropDown: 20000, + loadingMessage: 'loading...' + }, opt); + + $(document).bind("click", function(){ + $('.suggestbox_dropdown').hide(); + }); + $(document).bind("keypress", function(e){ + if (e.keyCode == 13) return false; + }); + + return this.each(function(index) { + var $original = $(this); + var $container; + var $input; + var $ul; + var max_opt=0; + + var jC = '#id_suggestbox_dropdown_' + index; + var jC0 = 'id_suggestbox_dropdown_' + index; + + function init() { + $("body").append('
'); + $('#suggestbox_dropdown_'+index).hide(); + + $container = $("
") + .addClass('suggestbox') + .attr('id', 'id_suggestbox_' + index) + .width($original.width()); + + $ul = $("") + .addClass('ul') + .attr('id', 'id_suggestbox_ul_' + index); + + $input = $("") + .addClass('input') + .attr('id', 'id_suggestbox_input_' + index) + .attr('autocomplete', 'off') + .width(options.inputWidth); + + //$container.append($input); + buildSelect(); + $original.wrap($container).before($ul).before($input); + $('#id_suggestbox_input_' + index).bind('keyup', clickInput); + } + + function appendNewItem(id){ + var a = $('#'+id).attr('rel').split(':'); + var val = a[0]; + var name = a[1]; + max_opt++; + var $option = $("").text(name).attr('id', 'id_soo_' + index + '_' + max_opt).attr("value",val).attr("selected", true); + $original.append($option).change(); + addListItem('id_soo_' + index + '_' + max_opt); + } + + function clickInput(e){ + var textBox = this; + var textVal = this.value; + var iniVal = ''; + + if (this.value.length >= 0) { + var offSet = $(this).offset(); + $(jC).css({ + position: "absolute", + top: (offSet.top + $(this).outerHeight() - 1) + "px", + left: offSet.left, + width: $(this).outerWidth()-2 + "px", + zIndex: options.zindexDropDown + }).show(); + + if (e.keyCode == 27 ) { + // esc + $(jC).hide(); + } + else if (e.keyCode == 13 ) { + if ($(jC + ' ul li.hilite').length==1) { + appendNewItem($(jC + ' ul li.hilite').attr('id')); + $input.val(''); + $(jC).hide(); + } + return false; + } + else if (e.keyCode == 40) { + // bottom arrow + if ($(jC + ' ul li.hilite').length==1) { + if (!$(jC + ' ul li.hilite').next().length == 0) { + var item_new = $(jC + ' ul li.hilite').next(); + $(jC + ' ul li.hilite').removeClass('hilite'); + $(item_new).addClass('hilite'); + } + } + else + $(jC + " ul li:first-child").addClass('hilite'); + } + else if (e.keyCode == 38) { + // if up arrow + if ($(jC + ' ul li.hilite').length==1) { + if (!$(jC + ' ul li.hilite').prev().length == 0) { + var item_new = $(jC + ' ul li.hilite').prev(); + $(jC + ' ul li.hilite').removeClass('hilite'); + $(item_new).addClass('hilite'); + } + } + else + $(jC + ' ul li.hilite').removeClass('hilite'); + } + // new query detected + else if (textBox.value != iniVal){ + iniVal = textBox.value; + $(jC).html('
'+options.loadingMessage+'
'); + setTimeout(function () { + $.ajax({ + type: options.reqest_method, + url: options.url, + data: 'q=' + $input.val() + '&rnd=' + Math.random(), + dataType: 'json', + success: function(res){ + $(jC).html(''); + jL = $(""); + $(jC).append(jL); + var t = $.template(options.template); + for (i=0; i").attr('rel', res[i].id+':'+res[i].name).attr('id',jC0+'_'+i); + $(li).append(t,res[i]); + $(jL).append(li); + } + $(jC + " ul li").bind("mouseover", function(){ + $(jC + " ul li").removeClass('hilite'); + $(this).addClass('hilite'); + }); + $(jC+ " ul li").click(function(){ + appendNewItem(this.id); + //appendNewItem($(this).attr('rel')); + $(jC).hide(); + }); + } + }); + }, options.delayDropDown); + } + } + // if text is too short do nothing and hide everything + else { + $(jH).removeClass(jsH); + $(jC).hide(); + } + + // no bubbling, click is binded to textBox to prevent document bind from firing + return false; + + } + + function buildSelect() { + buildingSelect = true; + $original.children("option").each(function(n) { + var $t = $(this); + var id; + if(!$t.attr('id')) $t.attr('id', 'id_soo_' + index + '_' + n); + id = $t.attr('id'); + addListItem(id); + if (max_opt') + .attr("src", "remove.gif") + .addClass('remove') + .click(function() { + dropListItem($(this).parent('li').attr('rel')); + return false; + }); + + var $itemLabel = $("") + .addClass(options.listItemLabelClass) + .html($O.html()); + + var $item = $("
  • ") + .attr('rel', optionId) + .addClass(options.listItemClass) + .append($itemLabel) + .append($removeLink) + //.hide(); + + $ul.append($item); + //addListItemShow($item); + } + + + function dropListItem(optionId) { + $('#' + optionId).remove(); + $item = $ul.children("li[rel=" + optionId + "]"); + dropListItemHide($item); + } + + function dropListItemHide($item) { + if(options.animate && !buildingSelect) { + $prevItem = $item.prev("li"); + $item.animate({ + opacity: "hide", + height: "hide" + }, 100, "linear", function() { + $prevItem.animate({ + height: "-=2px" + }, 50, "swing", function() { + $prevItem.animate({ + height: "+=2px" + }, 100, "swing"); + }); + $item.remove(); + }); + } else { + $item.remove(); + } + } + init(); + } + )} +})(jQuery); + -- 2.49.0