Question

If I create a textbox in a Firefox with a type of “autocomplete” I am able to get autocomplete working properly. However, the textbox is a intended to be used as search textbox (with autocomplete). Thus, in addition to autocomplete I also want the standard UI used when the textbox has a type of “search.” In particular, Firefox shows a magnifying glass that turns into an “X” when the user types into it.

Is there a clean (or, failing that, not so clean) way of accomplishing this?

Answer 1

Firefox Searchbar ,the one on right top usually, has type="autocomplete" and has the searchbutton

First: browser.xul of firefox has a toolbaritem which searchbar nested in it.

    <toolbaritem id="search-container" title="&searchItem.title;"
               align="center" class="chromeclass-toolbar-additional"
               flex="100" persist="width" removable="true">
    <searchbar id="searchbar" flex="1"/>
    </toolbaritem>

searchbar has the following css property in browser.css.

    searchbar {
      -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
    }

That url in css property brings us to search.xml which has the textbox and the searchbutton is added to textbox in a hbox as far as i can understand.

    <xul:textbox class="searchbar-textbox"
               anonid="searchbar-textbox"
               type="autocomplete"
               flex="1"
               autocompletepopup="PopupAutoComplete"
               autocompletesearch="search-autocomplete"
               autocompletesearchparam="searchbar-history"
               timeout="250"
               maxrows="10"
               completeselectedindex="true"
               showcommentcolumn="true"
               tabscrolling="true"
               xbl:inherits="disabled,disableautocomplete,searchengine,src,newlines">
    <xul:box>
      <xul:button class="searchbar-engine-button"
                  type="menu"
                  anonid="searchbar-engine-button">
        <xul:image class="searchbar-engine-image" xbl:inherits="src"/>
        <xul:image class="searchbar-dropmarker-image"/>
        <xul:menupopup class="searchbar-popup"
                       anonid="searchbar-popup">
          <xul:menuseparator/>
          <xul:menuitem class="open-engine-manager"
                        anonid="open-engine-manager"
                        label="&cmd_engineManager.label;"
                        oncommand="openManager(event);"/>
        </xul:menupopup>
      </xul:button>
     </xul:box>
     <xul:hbox class="search-go-container">
      <xul:image class="search-go-button"
                 anonid="search-go-button"
                 onclick="handleSearchCommand(event);"
                 tooltiptext="&searchEndCap.label;" />
     </xul:hbox>
    </xul:textbox>

Well this is not an total answer, but gives a head start for you or others who may contribute I guess. For further detail you can dig omni.jar in mozilla firefox directory.