问题描述
我在autocompleter盒基于 Scriptaculous的于Ajax.Autocompleter 的工作。
I am working on autocompleter box based on Scriptaculous Ajax.Autocompleter.
它的工作原理一般，但我需要有更广泛的选择（见图片列表 - 绿线 - - 320PX），然后输入框（见图片 - 红线 - 155px）
It works in general, but I need to have list of choices wider (see image -- green line -- 320px) then input box (see image -- red line -- 155px).
我的第一次尝试是为设置不同的宽度的CSS类（如上），但它没有工作 - 选择列表成为宽输入框。
My first try was to set various width with CSS classes (like above), but it didn't work -- list of choices became as wide as input box.
据萤火虫宽度我的CSS类定义被覆盖由宽度按设置element.style CSS类，这似乎是由于Ajax.Autocompleter 定义。
According to Firebug width defined by my CSS class was overwritten by width set by element.style CSS class, which seems to be defined by Ajax.Autocompleter.
我的第二次尝试是制定宽度为您在创建列表后于Ajax.Autocompleter
My second try was to set width for list of choices after creating Ajax.Autocompleter
$("isearch_choices").setStyle({width: "320px"});
但它没有工作过：（
but it didn't work too :(.
没有更多的想法：（
如何设置不同宽度的选择了Scriptaculous的于Ajax.Autocompleter列表？
下面有一种code完整的例子：
Below there is complete example of code:
<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>
和链接，图像以其结果。
推荐答案
的宽度由 Base.Autocompleter 实施自动复位自动完成列表。该 Base.Autocompleter 将列表设置为相同的宽度作为搜索输入框。有一对夫妇的方法去解决此问题：
The width is reset in the autocompletion list automatically by the Base.Autocompleter implementation. The Base.Autocompleter will set the list to be the same width as the search input field. There are a couple of ways to go around this:
您可以通过自己所描述的。对于script.aculo.us版本1.8.1中controls.js在第68行，你具备以下条件：
You can patch the Autocompleter.Base script by yourself as described by this post. For script.aculo.us version 1.8.1 in controls.js at line 68 you have the following:
Position.clone(element, update, {
setHeight: false,
offsetTop: element.offsetHeight
});
添加 setWidth：假进入该选项对象是这样的：
Add a setWidth: false into that options object like this:
Position.clone(element, update, {
setWidth: false,
setHeight: false,
offsetTop: element.offsetHeight
});
2。扩展非常的Autocompleter
下面的例子是用于扩展于Ajax.Autocompleter 。我们的想法是，以取代 OnShow中函数的基类会为了显示autocompleter和调整其大小Position.clone（）。
2. Extend very your Autocompleter
The example below is for extending the Ajax.Autocompleter. The idea is to replace the onShow function that the base class will call in order to show the autocompleter and resize it with 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});
}
});
}
});
和创建它像往常一样与新就像用其他Autocompleter类。
And you create it as usual with new just as with the other Autocompleter classes.
document.observe("dom:loaded", function() {
new MyAutocompleter('search', 'autoList', 'url/for/ajaxcall');
});
后者的好处是，你可以更新script.aculo.us版本，而不会重新跳线的文件，你可以继续过载，延长Autocompleter根据自己的喜好（因为你知道如何在基类的行为）。
The benefit of the latter is that you can update the script.aculo.us version without repatching the files, and you can continue to overload and extend the Autocompleter to your liking (given you know how the base class behaves).
这篇关于如何设置不同宽度的输入和DIV元素是Scriptaculous于Ajax.Autocompleter？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！