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

问题

I am working on autocompleter box based on Scriptaculous Ajax.Autocompleter.

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).

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.

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.

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 :(.

No more ideas :(.

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

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>

And link to image with its result.

回答1:

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:

1. Patch Autocompleter.Base by yourself

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
});

Add a setWidth: false into that options object like this:

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

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});
            }
        });

    }

});

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');
});

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).

回答2:

Seems to be fixed. I modified CSS stylesheets and seems (visually) to work:

Removed border from DIV element and moved it UL element.
Add width for 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;
        }

来源：https://stackoverflow.com/questions/2724344/how-to-set-different-width-for-input-and-div-elements-with-scriptaculous-ajax-au

标签

ajax

scriptaculous

autocomplete