search

winjs / angular-winjs

Project to smooth the AngularJS/WinJS interaction
Other
126 stars 46 forks source link

Search input with search button embedded #69

Closed sondreb closed 8 years ago

sondreb commented 8 years ago

Is it possible somehow to create a search input field (win-auto-suggest-box) that has a search button embedded into the frame/border of the input? This is a normal feature in many UWP apps.

Suggestions or hints on how to achieve this?

xdvarpunen commented 8 years ago

Actually what you are asking for is SearchBox control in WinJS(http://dkdevelopment.net/2013/09/03/WinJS.UI.SearchBox/). AutoSuggestionBox don't have search button/icon (http://winjs.azurewebsites.net/#searchbox).

sondreb commented 8 years ago

So I would have to do regular WinJS for SearchBox then? It is not mapped by the Angular WinJS library as far as I can see in the source?

Is it planned for a future version?

sondreb commented 8 years ago

@xdvarpunen Your answer only applies for Windows 8, I'm developing only for Windows 10 and there is no longer a SearchBox available for Windows 10, at least not according to the documentation:

https://msdn.microsoft.com/en-us/library/windows/apps/dn301949.aspx

[SearchBox is no longer available for use as of Windows 10. Instead, use AutoSuggestBox. ]

I guess my original question still applies then?

xdvarpunen commented 8 years ago

Sorry for not replying for a while. Your question was about embedding the search button inside the search box. You can do this in two ways.

Way 1) Set glyph into the autosuggestion text right before "Search.."; Glyph+"Search".

Way 2) Copy the idea a bit from Windows 10 Application. Check "Sports" in Windows 10. The Search button is separate from AutoSuggestionBox. Search button is put right after AutoSuggestionBox. The button does not do the query in Sports-Windows 10 app, but it can be implemented to do so. The point of the button is to show the AutoSuggestionBox when window is sized to mobile view.

I hope this helps you forward (: XDVarpunen

PS. I can provide you demo if you need.

sondreb commented 8 years ago

When you say "Glyph", do you mean a Symbols.ttf character or Segoe UI? Anyway I want to have the button, similar to Sports and other Windows apps.

This guideline shows the many forms of search inputs: https://msdn.microsoft.com/en-us/library/windows/apps/hh465233.aspx

I already have a win-app-bar-command placed next to my search input at the moment, so to copy the behavior from Sports and Store app, I would have to remove the right-side border on the input and left-side border on the button. I'll try that out and give the solution here when I'm done.

sondreb commented 8 years ago

That's not a viable solution, all existing search inputs have hover and focus effects that changes the border around the whole field. That would require a bit of "dirty" code, checking focus on the input field, then have a div as a custom border around the whole thing as oppose to border on the input field itself.

xdvarpunen commented 8 years ago

Well you have two decades of programming experience so this should be easy for you.

sondreb commented 8 years ago

@xdvarpunen Hehe thanks :-) I can easily hack anything, but I will try to make a solution that is in line with the WinJS and I'll share the solution here. Reason I ask for help is to avoid to many hacks, I already have a bunch in my app, though I had to hack the previous UI frameworks as well (Angular Material and LumX).