WebSearchField - display "x" at end to clear contents

Targets Web
1

I’ve added a Search Field to a Web project. Works fine, but what I’d like to have is a little “x” at the end so that the contents of the field can easily be cleared - pretty common UI for this kind of thing.

It should be possible to get most recent browsers to add the “x” automatically, by using “type=search” to the HTML that’s used to display the field - see http://www.html5tutorial.info/html5-search.php. I’ve had a look at the HTML that Xojo generates for a WebSearchField, and it uses type=text instead of type=search. There doesn’t seem to be any obvious way to change this.

I can work around this by overlaying a canvas over the top of the search field, drawing an “x” icon on it, and using the MouseUp event to simulate a button (and no doubt there are other things that can be done with CSS/JavaScript). This works, but isn’t ideal.

Is there a good reason why Xojo should use “type=text” for WebSearchFields, am I missing something, or is this a feature request job?

2

What browser are you using? What Xojo version are you using?
I just did a little test project in 2016r3, and the search field is indeed type=“search”

In Safari, I see the X you wish to accomplish.

Weirdly, if you try to set a TextField to type=“search” using Javascript in the Shown event it doesn’t have either the magnifying glass icon, nor the X in Safari. It does change shape though.

ExecuteJavaScript("document.getElementById('" + me.ControlID + "_inner').type = 'search'")
3

Well, that’s bizarre! I too am using Xojo 2016r3, but on Windows rather than Mac. If I drag a totally standard WebSearchField onto a Web page in a brand sparkly new project, the HTML I see for it is:

<input id="NGWMczZx_inner" name="SearchField1" value="Search" type="text" style="color: rgb(127, 127, 127);" class=" searchField">

I’ve looked at it with Chrome, IE11, and Edge - all on Windows 10. Interestingly, IE and Edge do display the “x” even though I can confirm with their respective Developer Tools that the line of HTML they’re rendering is indeed as above with type=“text”. It’s only Chrome that doesn’t play ball. If I use Chrome’s Developer Tools to tweak the HTML so that type=“search”, Chrome adds the “x” too, but the height of the field decreases.

4

Here’s the test project in question. Be really interesting to know if it produces different code on Mac!

https://xojo.io/74b0ff756817

5

Your project, built on Mac:

<input id="N3GDu3z8_inner" name="SearchField1" type="search" placeholder="Search" results="10" autosave="com.mycompany.myapp.SearchField1">
7

Brilliant, thanks for checking that out, Tim. Hopefully Greg will see your ping!

8

File a feature request. When the control was created, none of the IE browsers had a native search field, but we could probably change that now.

9

Thanks Greg - will do.

10

…and in the meantime I’m going to check out your ExecuteJavaScript tweak, Tim. Thanks again!

11

Ok, so search fields only appeared in IE11, so we’d still need to do something for earlier versions.

12

What happens when you build a Web app on a Mac, and then connect to it with a Windows browser? How do the search fields display, given that the Mac-built Web app is producing different code for the browser to render?

13

For the moment, it is easy to place a label with X as text on top of the right part of the search field, with this in the MouseUp event :

Sub MouseUp(X As Integer, Y As Integer, Details As REALbasic.MouseEvent) Handles MouseUp SearchField1.Text = "" End Sub

14

It has nothing to do with where the app was built. The control HTML is built for the browser at runtime. You see the best representation for the user agent presented. As features evolve, sometimes that representation needs to change.

15

If you are serious about making sure your app looks good in all browsers, you should consider having an emulator installed to check how it looks under other systems. I use VMWare Fusion on Mac, but you can also download VirtualBox.

Pre installed Windows virtual machines can be found here https://developer.microsoft.com/en-us/microsoft-edge/

16

The problem is that if you build a Xojo Web project on Mac, you get different HTML code to when you build the same project on Xojo for Windows - check out earlier in the conversation.

17

At any rate you want to make sure your app behaves correctly under all current platforms. Incidentally, that includes not only Mac, but especially Android and iOS.

18

THat shouldn’t be the case. the app decides what to send based on the browser.

19

This isn’t true. See my earlier post.

20

Yes, I’d misunderstood. Tim P got a different result not because he’d compiled the project on a Mac, but because he was using a Mac browser. That makes much more sense.

Thanks all - I’ll go ahead and create that feature request.