Welcome to Geeklog, Anonymous Thursday, March 28 2024 @ 04:53 am EDT

Geeklog Forums

input type="search"


Status: offline

Dirk

Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
Apparently this is something that has been around since 2004(!) but I only noticed it yesterday: Some sites use
Text Formatted Code
<input type="search" ...>
for their search fields. While this is not valid HTML (yet, it will be part of HTML 5), it is accepted by all browsers. And some of them (e.g. Safari and a few others) will then store your last search queries for that site for you.

Now, if you don't care about valid HTML, you could simply change all your search fields in Geeklog to type="search". Or you could use a JavaScript solution.

Yet another way is to use Geeklog's templating engine. Create a function CUSTOM_templateSetVars in your lib-custom.php that checks if the visitor's browser identifies itself as Safari and set the type to "search" if it does or to "text" if it doesn't. Like so:
Text Formatted Code
function CUSTOM_templateSetVars($templatename, &$template)
{
    global $_CONF, $LANG09;
 
    switch ($templatename) {    
    case 'header':
        $agent = $_SERVER['HTTP_USER_AGENT'];
        if (strpos($agent, 'Safari') !== false) {
            $parts = parse_url($_CONF['site_url']);
            $search_input_type = 'search';
            $search_attributes = 'autosave="' . $parts['host'] . '" results="5"'
                               . ' placeholder="' . $LANG09[10] . '" ';
        } else {
            $search_input_type = 'text';
            $search_attributes = '';
        }
        $template->set_var('my_search_input_type', $search_input_type);
        $template->set_var('my_search_attributes', $search_attributes);
        break;    
    }
}


Then edit layout/professional/leftblocks.thtml (or header.thtml, depending on where you have your search field) and change the input field for the "query" like so:
Text Formatted Code
<input style="width:95%" type="{my_search_input_type}" {my_search_attributes}name="query" maxlength="255" value=""{xhtml}>


Safari users should see the effect in the search field on the top left. It should also be visible in Chrome (haven't tested that, but it does identify itself as Safari).

Added bonus: On mobile versions of Safari (e.g. on an iPhone), the virtual keyboard will now have a key labeled "Search".

Other browsers that support this could be added, as long as there's a way to identify them.

Note that this does not currently work on the Advanced Search page, since it doesn't have a hook for CUSTOM_templateSetVars yet (to be added in future Geeklog versions ...).

bye, Dirk
 Quote

Status: offline

Dirk

Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
Just noticed that it's probably better to check the user agent string for "AppleWebKit" instead of "Safari".

Many browsers based on WebKit seem to use "Safari", but not all of them. One that I just found is iCab Mobile, which uses "AppleWebKit" but not "Safari" but does support the search form type just fine.

bye, Dirk
 Quote

All times are EDT. The time is now 04:53 am.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content