/    Sign up×
Community /Pin to ProfileBookmark

Mobile Friendly – Customer Search / List

Copy linkTweet thisAlerts:
Oct 09.2021

On my desktop view, I’ve got 4 fields for searching what I’m after. One for example is a customer look-up, another is a product search.

On my mobile view I hide these options and hyperlink the user to a dedicated index/search page.

Given I’ve got thousands of active customers and hundreds of products a simple list doesn’t work.

Any suggestions on how to display this?

On my desktop, I have inputbox, which uses JS to populate potential matches as DIV items into a parent DIV which is position absolute below the input box. These are hyperlinks not a search field. It’s just messey so exploring what other options could be around.

to post a comment
Full-stack Developer

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@boohooOct 09.2021 — How about a box with overflow-y: auto?
Copy linkTweet thisAlerts:
@kiwisauthorOct 09.2021 — @boohoo#1638019

What do you mean?

It would look similar to this? Is that a mobile friendly design?

https://jsfiddle.net/zf13uaj2/
Copy linkTweet thisAlerts:
@boohooOct 09.2021 — @kiwis80#1638020 yes, but please add more items to the list to see how it works. And yes, this is mobile friendly, because it would be scrollable. Just make sure to clearly show that the list is scrollable, for example by applying a subtle gradient at the bottom.

That being said, I'd reflect on whether it's what you want. When I implement input suggestions / search results, sometimes it's enough to just show n best results. You could for example display info like "Displaying 10 of 1023 results" and make your users narrow down the criteria to find what they need. Another idea would be to implement infinity scroll for your results - it really depends on your scenario.
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...