Setting the width for the Ajax Autocomplete result list

Question:

---

How can I set the width of the Ajax Autocomplete result list to a different value from the field?

Answer:

---

Wen using the Ajax Autocomplete extension, the standard setting for the width of the result list is the same as the width of the input field. In some cases it might be necessary to change the width of the result list, while the width of the input field has to stay the same.

A minor adjustment in the file autocomplete.css, which is located in the ScriptLibrary folder, can make this happen.

Open the autocomplete.css file. The first CSS style is named .ac_results. Add the following value to this style and edit its number to give it the correct width:

  width: 200px !important;

The complete code should look like this:

.ac_results {
    padding: 0px;
    border: 1px solid #6FBEFF;
    background-color: #EFF8FF;
    overflow: hidden;
    z-index: 99999;
    width: 200px !important;
}

Save the CSS file and upload it to the live server. The width of the result list has now been set to the selected value in pixels!