2

I am creating a search box where the results will be displayed in a popup below the textbox (standard layout, like the Google search box).

The search term will be compared to multiple properties in the item set and will populate a list in the popup. I've created a basic wire frame here:

enter image description here

The primary name for the matched item needs to be displayed in the left column, and the value of the matched property should also be displayed. I have added it to the right column as right aligned with the matched area highlighted.

My problem is that the combination of primary value and matched property value will exceed the width of the search box. I'm reluctant to increase the width because after a selection, only the primary value will be displayed in the textbox.

I'd prefer to keep the results on the same line and a consistent font size..

Does anyone have suggestions as to how to squeeze these values into the confined space?

|improve this question
  • 1
    why not just increase the width of only the drop list? make it bigger than your search field. Considering the complexity of the search, I think a less than perfect aesthetic appeal should be ok – Kashyap Aug 9 '11 at 18:27
  • I am considering it, but would have liked to keep the two in line. – jjrdk Aug 10 '11 at 8:47
  • @Kashyap If you Change your comment to an answer I'll accept it. After going through different option, there doesn't seem to be a substitute for adding more space to the dropdown. – jjrdk Aug 11 '11 at 9:05
  • Hey thats great! I don't think there is any way to convert that into an answer, anyway I thought what I proposed was a far too simple a solution. :) – Kashyap Aug 12 '11 at 11:28
1

why not just increase the width of only the drop list? make it bigger than your search field. Considering the complexity of the search, I think a less than perfect aesthetic appeal should be ok

|improve this answer
1

Yes - get rid of the box :)

Lose the border and display the results on a background that's calculated by the longest string (well, give it a reasonable maximum width of course). If you detach it from the search box, noone will think it's supposed to be flush with it.

|improve this answer
  • I may not have expressed myself sufficiently precise. The whole point of the boxes is to illustrate a search box. If you go to the Google search page and type a search, you should see suggestions underneath. These are enclosed. My problem is that I have a more limited space but have to show more information that the average Google suggestion. The point of the question was to get some suggestions about how to do this. – jjrdk Aug 10 '11 at 8:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.