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,

     

  • 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,