Question

如果我在Firefox中使用textbox“自动填充”创建type，我可以自动完成正常工作。但是，文本框旨在用作搜索文本框（具有自动完成功能）。因此，除了自动完成之外，我还想要在文本框具有“搜索”类型时使用的标准UI。特别是，Firefox会显示一个放大镜，当用户输入时会变成“X”。

是否有干净的（或者，没有，不那么干净）的方式来完成这个？

Answer 1

Firefox搜索栏，通常位于右上角，有type="autocomplete"并且searchbutton

首先：firefox的browser.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被textbox添加到hbox，据我所知

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

如何使用“搜索”放大镜创建自动完成文本框

1 个答案: