I'm working on an autocomplete that has really long product titles.
Having it extend beyond the search bar width is certainly ugly, but is it the best experience?
Any other ideas?
I'm thinking other improvements may include smaller font size 16px => 15px and maybe making the height of each item 16px to add space between options.
If your primary goal is to ensure that all the text is visible (which will rule out truncating the text or making certain search results look the same), extending the width of the display might not solve the problem because you ended up having to go to a second line for certain products anyway. And if you start reducing the size of the text it will reduce legibility, or if you allow users to scroll horizontally it will also lead to poor user experience. I think the only way to improve scanning for the user is to group the autocomplete suggestions in some way (e.g. by brands).
If your primary goal is to ensure that the user gets to the expected results as quickly as possible, I would suggest that additional search parameters be specified or included in the search feature or returned results so that other information like brand, price or other characteristics of the products can be used to narrow down the search results. I assume you probably already allow this in the search results page anyway so they can refine and update the results.
As far as the autocomplete feature is concerned, you can only do as much as the way that product names are structured to allow you to display it. If you really want to address this problem then you need to go back to the root cause of the issue.
I'd distinguish between auto-complete and search (hinted at by Michael's answer already).
Auto-complete offers a few (frequent?) matches, but works best when the user types rarely used fragments, so that there are few matches. It's aimed at the "knowledgeable" user, as a help to avoid typing long names.
Having the auto-complete list wider than the search field is what I see often and is ok, I think.
Auto-complete does not need to list unique results, in my view. If you really have long names, as your example suggests, truncate them so they fit on one row. But treat these as search terms, not result links: Searching for "P", two products "Panel 1" and "Panel 2" should show up as a single "Pan..." auto-complete entry, with both products listed as search results when this entry is selected. (It does not help showing two "Pan..." entries in the auto-complete list, I want to say.)
You may also show only the first 10 matches plus a "Show all" entry which will link to the list of results with all products matching the currently entered search term.
Offer a search functionality separately, where users can determine brand, product group, price, ...
