Question

I found a great plug-in for doing Auto-Complete with Javascript called AutoSuggest thanks to this Stack Overflow post:

plugin to separate tags (like the stackoverflow's input tags interface)

Here is the link to the plug-in author’s page:

http://code.drewwilson.com/entry/autosuggest-jquery-plugin

The autoSuggest plug-in is setting the width of the input box (type=”text”) for entering queries to 1000px, much wider than I want. It is somehow overridding the width set in the input box style property in the document HTML:

<div NAME="divAutoSuggest" ID="divAutoSuggest">
        <input type="text" NAME="editQuery2" ID="editQuery2" wrap="soft" style="margin-left:5px;width:600px;" title="Enter your search query here using plain English"></input>
</div>

I also tried using the cols attribute in the input box definition but that was ignored too. I found this other Stack Overflow post that talked about intercepting the width setting during the open event, but the example was for the autocomplete plug-in and not autoSuggest:

Changing width of jquery-ui autocomplete widgets individually

I tried it anyways using this code:

$(document).ready
(
function() 
{
    // Put jQuery related initialization code that must occur after the document is ready here.

    $("input[type=text]").autoSuggest
    (
        data.items, 
        {
            selectedItemProp: "name", 
            searchObjProps: "name",
            startText: "Enter Evernote tags here...",
            open: function(event, ui) 
            {
                $(this).autoSuggest("widget").css
                (
                    {
                        "width": 600
                    }
                );
            }
        } // data. items
    ); // $("input[type=text]").autoSuggest
} // function() 
); // $(document).ready

But that did not work either. can anyone tell me how to set the width of the input box? Note I am not talking about the drop-down box with the auto-complete entries, I am referring to the primary input area where you type the text that triggers the auto-complete drop-down box.

Answer 1

To set the width for the AutoSuggest jQuery Plugin, you need to search for ul.as-selections in the CSS that came with it and define your width:

CSS

ul.as-selections {
  ...
  width: 400px; // define your width
  ...
}

---

If you haven’t changed the original CSS, It’s like this:

CSS ORIGINAL DECLARATIONS ^{for ul.as-selections}

ul.as-selections {
 list-style-type: none;
  border-top: 1px solid #888;
  border-bottom: 1px solid #b6b6b6;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  padding: 4px 0 4px 4px;
  margin: 0;
  overflow: auto;
  background-color: #fff;
  box-shadow:inset 0 1px 2px #888;
  -webkit-box-shadow:inset 0 1px 2px #888;
  -moz-box-shadow:inset 0 1px 2px #888;
}