如何使用「搜索」放大鏡創建自動填充文本框

Question

如果我在帶有type「自動填充」的Firefox中創建textbox，我可以使自動填充功能正常工作。但是，該文本框旨在用作搜索文本框（具有自動完成功能）。因此，除了自動完成功能外，我還希望當文本框具有「搜索」類型時使用標準UI。特別是，Firefox會顯示一個放大鏡，當用戶輸入時會變成「X」。

是否有一個乾淨的（或者，失敗的，不那麼幹淨）的方式來完成這個？

Answer 1

火狐搜索欄，所述一個上右上方通常，具有type="autocomplete"並具有searchbutton

第一：火狐的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"); 
    } 

該URL在CSS屬性給我們帶來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。