如何使用"Search"放大镜创建自动完成文本框

Question

如果我在Firefox中创建一个带有"自动完成"类型的文本框，我就能够使自动完成正常工作。然而，文本框是一个打算用作搜索文本框(具有自动完成功能)。因此，除了自动完成之外，我还希望在文本框类型为"search"时使用标准UI。特别是，Firefox显示了一个放大镜，当用户输入它时，它会变成一个"X"。

是否有一种干净(或者，如果没有，不那么干净)的方法来完成这个?

Answer 1

Firefox搜索栏，右上方这个通常有type="autocomplete"和searchbutton

第一:浏览器。firefox的xul有一个toolbaritem, searchbar嵌套在里面。

    <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在browser.css中有如下css属性:

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

在css属性中的url带给我们search.xml，其中textbox和searchbutton被添加到hbox中的textbox，据我所知。

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

好吧，这不是一个完整的答案，但我想这给了你或其他可能贡献的人一个好的开始。要了解更多细节，您可以在mozilla firefox目录中挖掘omni.jar。