Search bar with dropdown list

Search bar with dropdown list

  

Hi.

Is it possible to make a search bar, where the results appear in the form of a dropdown list, and clicking on these items will redirect to another page?

Thank you!

Hello Saurav,

I think it is a little bit difficult to understand what do you want.
You want an input that when you type, it changes the content of a dropdown list and clicking it goes to another page?

And are you in Mobile or Web?

In any case, the idea woould ne that when you press Search/Filter/whatever button, or in the OnChange event of the input, you change the list that is feeding the dropdown list filtered by the content of the search input.

Than when you select an item in the drop down, you execute the OnChange of it and in the action, navigate to the page you want.

I think this will be the same (more or less) in Mobile and in Web.

But I find this interface rather bad...
Why don't you use the standard that is to show a list?

Cheers,
Eduardo Jauch

If you are doing a web app you can take a look at Select2 widget. Is it something like this you're trying to implement?

You can see an example here: https://silkui.outsystems.com/Patterns_Web.aspx#Web_Controls_Select2

While you're at it take the opportunity to browse all the available widgets/components available to speed up your applications.

Eduardo Jauch wrote:

Hello Saurav,

I think it is a little bit difficult to understand what do you want.
You want an input that when you type, it changes the content of a dropdown list and clicking it goes to another page?

And are you in Mobile or Web?

In any case, the idea woould ne that when you press Search/Filter/whatever button, or in the OnChange event of the input, you change the list that is feeding the dropdown list filtered by the content of the search input.

Than when you select an item in the drop down, you execute the OnChange of it and in the action, navigate to the page you want.

I think this will be the same (more or less) in Mobile and in Web.

But I find this interface rather bad...
Why don't you use the standard that is to show a list?

Cheers,
Eduardo Jauch

Hi Eduardo.

Sorry for the late response. I'm currently working on mobile.

I want to replicate a normal search bar. You type into an input box, and a dropdown of the matches appear. OnClick of this is a later stage issue. I'd first like to be able to get a UI for a normal search bar.


Hi Saurav,

I'd say you could use the Input_AutoComplete RichWidget for the "updating dropdown"... not sure about your "onclick" part afterwards, though. And you need to be careful how you implement this, if the search is too heavy, the UI will be slow/unresponsive you'll end up with a bad UX.

Hi Saurav,


I implemented something similar in one of my previous projects, basically what I did was an input, that refreshes a list below. It's not exactly the same pattern that we use for web applications, but I would say that it works pretty well in mobile.

José Gomes wrote:

Hi Saurav,


I implemented something similar in one of my previous projects, basically what I did was an input, that refreshes a list below. It's not exactly the same pattern that we use for web applications, but I would say that it works pretty well in mobile.

Hi Jose.

That's what I've currently done, and it work fine. But the problem is, all the containers under this input get pushed down. Is there a way to have the list appear over the other containers?


Saurav Sircar wrote:

José Gomes wrote:

Hi Saurav,


I implemented something similar in one of my previous projects, basically what I did was an input, that refreshes a list below. It's not exactly the same pattern that we use for web applications, but I would say that it works pretty well in mobile.

Hi Jose.

That's what I've currently done, and it work fine. But the problem is, all the containers under this input get pushed down. Is there a way to have the list appear over the other containers?


I didn't try it (neither I have a way to do it now), but it should be possible with CSS.


Regards,

José


José Gomes wrote:

Saurav Sircar wrote:

José Gomes wrote:

Hi Saurav,


I implemented something similar in one of my previous projects, basically what I did was an input, that refreshes a list below. It's not exactly the same pattern that we use for web applications, but I would say that it works pretty well in mobile.

Hi Jose.

That's what I've currently done, and it work fine. But the problem is, all the containers under this input get pushed down. Is there a way to have the list appear over the other containers?


I didn't try it (neither I have a way to do it now), but it should be possible with CSS.


Regards,

José


Possible how? Any suggestions?


Hi Saurav,

sorry I didn't notice you mentioned you were on mobile.

You can specify where your elements should be displayed using CSS via CSS positioning (check the position: absolute; option there, probably does what you want). 

Hi Saurav, 


Maybe with floating and absolute positioning.


Regards,

JSGomes

José Gomes wrote:

Hi Saurav, 


Maybe with floating and absolute positioning.


Regards,

JSGomes

Thanks Jose. Worked out great.


Glad to hear that! :)