"검색"돋보기로 자동 완성 텍스트 상자를 만들 수있는 방법

Question

type이 "autocomplete"인 Firefox에 textbox을 작성하면 자동 완성 기능을 제대로 사용할 수 있습니다. 그러나 텍스트 상자는 검색 텍스트 상자 (자동 완성 포함)로 사용하기위한 것입니다. 따라서 자동 완성 외에도 텍스트 상자에 "검색"유형이있을 때 사용되는 표준 UI가 필요합니다. 특히 파이어 폭스 (Firefox)는 사용자가 타이핑 할 때 "X"로 변하는 돋보기를 보여줍니다.

이 작업을 수행하는 데있어서 깨끗한 (또는 실패한, 깨끗하지는 않은) 방법이 있습니까?

Answer 1

파이어 폭스 검색 창, 일반적으로 우측 상단에 하나, type="autocomplete"을 가지고 있으며 searchbutton

첫째있다 : 파이어 폭스의 browser.xul이 searchbar가 그 안에 중첩 된 toolbaritem 있습니다.

<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 속성이 있습니다. CSS 속성에 URL이 우리가 textbox을 가지고 있으며 searchbutton는 지금까지 내가 이해할 수로 hbox에 textbox에 추가되는 search.xml을 가져 오는

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

.

<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를 참조하십시오.