All geek questions in one place

How to set different width for INPUT and DIV elements using Scriptaculous Ajax.Autocompleter?

I am working on autocomplete based on Scriptaculous Ajax.Autocompleter .

This works as a whole, but I need the list of options to be wider (see image - green line - 320 pixels), then enter (see image - red line - 155px).

My first attempt was to set different width with CSS classes (like above), but that didn’t work - the list of options became as wide as the input field.

According to the Firebug width defined by my CSS class, the width was overwritten by the installed element.style CSS class, which seems to be defined by Ajax.Autocompleter .

My second attempt was to set width for a list of options after creating Ajax.Autocompleter

 $("isearch_choices").setStyle({width: "320px"});

but that didn't work either: (.

More ideas: (.

How to set different width for options list for Scriptaculous Ajax.Autocompleter?

The following is a complete code example:

 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script> <style> input.iSearchInput { width: 155px; height: 26px; margin-top: 7px; line-height: 20px; } div.iSearchChoices { position:absolute; background-color:white; border:1px solid #888; margin:0; padding:0; width: 320px; } div.iSearchChoices ul { list-style-type:none; margin:0; padding:0; } div.iSearchChoices ul li.selected { background-color: #ffb;} div.iSearchChoices ul li { list-style-type:none; display:block; margin:0; padding:2px; height:32px; cursor:pointer; border-bottom: 1px dotted #929292; } </style> </head> <body> <input type="text" maxlength="255" class="input iSearchInput" name="isearch_value" id="isearch" value="Search" onfocus="this.select()"> <br> <div id='isearch_choices' class='iSearchChoices'></div> </script> </body> <script> function iSearchGetSelectedId(text, li) { console.log([text, li.innerHTML].join("\n")); document.location.href = li.getAttribute("url"); } document.observe('dom:loaded', function() { try { new Ajax.Autocompleter("isearch", "isearch_choices", "/url", { paramName: "phrase", minChars: 1, afterUpdateElement : iSearchGetSelectedId }); } catch (ex) { alert(ex); } $("isearch_choices").setStyle({width: "320px"}); }); </script> </html>

And a link to the image with its result .

+1
source share
2 answers

The width of the reset in the autocomplete list automatically using the Base.Autocompleter implementation. Base.Autocompleter set the list to have the same width as the search input field. There are several ways around this:

1. Patch Autocompleter.Base yourself

You can fix Autocompleter.Base script yourself as described in this post . For script.aculo.us version 1.8.1 in controls.js on line 68 you have the following:

 Position.clone(element, update, { setHeight: false, offsetTop: element.offsetHeight });

Add setWidth: false to this parameter object as follows:

 Position.clone(element, update, { setWidth: false, setHeight: false, offsetTop: element.offsetHeight });

2. Expand your autorun

The following is an example of the Ajax.Autocompleter extension. The idea is to replace the onShow function that the base class will call to show autocomplete and resize it using Position.clone() .

 /** * Extension of Ajax.Autocompleter that disables width reset. * @class */ var MyAutocompleter = Class.create(Ajax.Autocompleter, { /** * @constructor * @param $super reference to the base class (provided by prototype.js) * @param id_for_search the id for the search input element * @param id_for_list the id for autocompletion list element * @param url the ajax url to be used */ initialize: function($super, id_for_search, id_for_list, url) { $super(id_for_search, id_for_list, url, { onShow: function(element, update) { if(!update.style.position || update.style.position=='absolute') { update.style.position = 'absolute'; Position.clone(element, update, { setHeight: false, setWidth: false, offsetTop: element.offsetHeight }); } Effect.Appear(update,{duration:0.15}); } }); } });

And you create it as usual with new just like with other autocomplete classes.

 document.observe("dom:loaded", function() { new MyAutocompleter('search', 'autoList', 'url/for/ajaxcall'); });

The advantage of the latter is that you can upgrade the version of script.aculo.us without reloading the files, and you can continue to overload and extend Autocompleter to your liking (given that you know how the base class behaves).

+1
source

It seems to be fixed. I modified the CSS stylesheets and it seems (visually) to work:

  • The border is removed from the DIV element and moved to the UL element.
  • Add width for the UL element.

Here are my changes:

  div.iSearchChoices { position:absolute; background-color:white; /* border:1px solid #888; */ margin:0; padding:0; /* width: 320px; */ } div.iSearchChoices ul { list-style-type:none; margin:0; padding:0; /* moved from div.iSearchChoices class */ border:1px solid #888; width: 320px; }
0
source

Source: https://habr.com/ru/post/1338831/

More articles:


All Articles