Forum Discussion

iftomkins's avatar
iftomkins
Maven
11 years ago

Search appearing as "Go" on iPhone: How to change the search input type to type="search"

In testing our mobile V1 community, we noticed that when the user is focused on the search input, the iphone keyboard says "Go". It should say "Search". In order for it to say search, the input must have type="search". Currently it has type="text".

 

I tried changing this with jQuery:


    $("#lia-body .lia-content .lia-form-all-words-entry input").attr("type","search");

 

But it gave me the following error, and the internet tells me that you cannot change the type of an input with jQuery.

 

"Uncaught Error: type property can't be changed"

 

How can this be fixed? It seems like a small oversight on Lithium's part when first designing the search input, and I hope it can be fixed. :)

 

 

 

 

  • PaoloT's avatar
    PaoloT
    11 years ago

    Hi iftomkins 

     

    thanks for sharing the StackOverflow article. How I see - it there are two options:

     

    1. Attempt the customization of the search field. Rather than using the OOTB component - you may try to create a custom component using the required input type 
    2. Raise an Idea in our ideation board - this should give it some visibility to product management. It sounds like it could be a quick win, however I am not really in a position to see the full picture around what is required to change this in terms of effort and testing within the platform etc... Best to put it out there, and get it reviewed by our product managers!

    Thanks,

     

6 Replies

Sort By
  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    11 years ago

    Hi iftomkins 

     

    I don't think jQuery allows you to change the type attribute of an input field. However - you may try and set the "placeholer" attribute to determine which watermark text appears within the search input field. I have not tested it as I don't have an iPhone :smileyhappy:

     

    Let us know if that works,

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    Thanks, but using a placeholder = "search" does not work. Also using an initial value = "search" does not work.

     

    What works according to this Stackoverflow article is having the name of the input contain the word search. Good semantic practice anyway.

     

    Currently, the input name = "allWords". When I change it to name = "search", then when I search, no search results come up for queries that do normally return search results.

     

    Can this be something changed on the Lithium side?

     

     

  • PaoloT's avatar
    PaoloT
    Lithium Alumni (Retired)
    11 years ago

    Hi iftomkins 

     

    thanks for sharing the StackOverflow article. How I see - it there are two options:

     

    1. Attempt the customization of the search field. Rather than using the OOTB component - you may try to create a custom component using the required input type 
    2. Raise an Idea in our ideation board - this should give it some visibility to product management. It sounds like it could be a quick win, however I am not really in a position to see the full picture around what is required to change this in terms of effort and testing within the platform etc... Best to put it out there, and get it reviewed by our product managers!

    Thanks,

     

  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago
    Yes, that?s probably the best idea. That?s the unfortunate answer I?ve come to many times: small tweak? ?> rebuild the component. :(
  • iftomkins's avatar
    iftomkins
    Maven
    11 years ago

    I got it to work following your advice. I copied and pasted the HTML from the search input and put it in a custom component, changing the "type" to "search" and adding a placeholder attribute. 

     

    I didn't get it to work on the search page, since it's a different component, so I just left the one on the search page. It might work to copy the HTML from the search page component, though.