SMARTY：Header-Search

Question

嘿，我有一個輕微的問題。也許有些人可以真正幫助你。事情是我有這個導航欄（代碼如下）在我的網站實施。這只是一個歡迎文本和搜索，但搜索將無法正確顯示。我想要一個像在這裏搜索Stackoverflow的結果，只是在文本條目右側的圖標。

在代碼中的index.html：

{if strstr ($smarty.server.PHP_SELF, 'index')} 
       <div class="{if strpos($smarty.server.PHP_SELF, 'checkout')}span12{else}span9 desk9{/if}" style="left: 0px;"> 
        <div class="navbar navbar-default"> 
          <div class="container"> 
           <ul class="nav pull-left" >        
            <li class="navbar-text"> HERZLICH WILLKOMMEN </li> 
           </ul> 
           <ul class="nav pull-right" >  
            <li class="navbar-search">{$box_SEARCH_HEADER}</li> 
           </ul> 
          </div> 
        </div> 
        {/if} 
       </div> 

代碼在search_header.php：

<? php 
$box_smarty = new smarty; 
$box_smarty->assign('tpl_path', 'templates/' . CURRENT_TEMPLATE . '/'); 
$box_content = ''; 

require_once (DIR_FS_INC . 'xtc_hide_session_id.inc.php'); 

// BOF - GTB - 2010-09-20 - correct the Formular in dependences of the request type SSL/NONSSL 
$box_smarty->assign('FORM_ACTION', xtc_draw_form('quick_find_header', xtc_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') . xtc_hide_session_id()); 
//$box_smarty->assign('FORM_ACTION', xtc_draw_form('quick_find', xtc_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . xtc_hide_session_id()); 
// BOF - GTB - 2010-09-20 - correct the Formular in dependences of the request type SSL/NONSSL 
//BOF - Dokuman - 14.08.2009 - Put dynamic "search"-text into box 
//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', '', 'size="20" maxlength="30"')); 
//BOF - web28 - 2010-04-11 - change input html size to css width 
//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'size="20" maxlength="30" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"')); 

$search = xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'class="span11" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"'); 
$search .= xtc_image_submit('button_quick_find.gif'); 
$box_smarty->assign('INPUT_SEARCH', $search); 

//$box_smarty->assign('INPUT_SEARCH', xtc_draw_input_field('keywords', IMAGE_BUTTON_SEARCH, 'class="span11" onfocus="if(this.value==this.defaultValue) this.value=\'\';" onblur="if(this.value==\'\') this.value=this.defaultValue;"')); 
//EOF - web28 - 2010-04-11 - change input html size to css width 
//EOF - Dokuman - 14.08.2009 - Put dynamic "search"-text into box 
$box_smarty->assign('FORM_END', '</form>'); 
$box_smarty->assign('LINK_ADVANCED', xtc_href_link(FILENAME_ADVANCED_SEARCH)); 
$box_smarty->assign('BOX_CONTENT', $box_content); 
$box_smarty->assign('PLACEHOLDER', IMAGE_BUTTON_SEARCH); 

$box_smarty->assign('language', $_SESSION['language']); 
$box_smarty->caching = 0; 
$box_search_header = $box_smarty->fetch(CURRENT_TEMPLATE . '/boxes/box_search_header.html'); 

$smarty->assign('box_SEARCH_HEADER', $box_search_header); 

>

代碼box_search_header.html：

{$FORM_ACTION|replace:'<form':'<form class="navbar-search pull-right"'} 
{$INPUT_SEARCH|replace:'span11"':'search-query span2" placeholder="gggg"'|replace:'gggg':"`$PLACEHOLDER`"} 
{$FORM_END} 

現在是css-fil E：

#quick_find_header input { 
    background-color: #515151; 
    border-color: #111111; 
    color: #999; 
    } 
    #quick_find_header input:focus { 
    box-shadow: none; 
    color:#fff; 
    } 

打開頁面時，我得到的最終代碼：

<div class="navbar navbar-default"> 
           <div class="container"> 
            <ul class="nav pull-left" >        
             <li class="navbar-text"> HERZLICH WILLKOMMEN </li> 
            </ul> 
            <ul class="nav pull-right" >  
             <li class="navbar-search"> 
<!-- Orginal 
<form class="navbar-search pull-right" id="quick_find_header" action="http://vorschau2.de.dedi2539.your-server.de/fitinart.com/advanced_search_result.php" method="get"> 
    <input type="text" name="keywords" value="Suchen" class="search-query span2" placeholder="Suchen" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><input type="image" src="templates/bootstrap/buttons/german/button_quick_find.gif" alt="" /> 
</form> 
--> 

<!--Ãnderung --> 
<form class="navbar-form pull-right" id="quick_find_header" action="http://vorschau2.de.dedi2539.your-server.de/fitinart.com/advanced_search_result.php" method="get"> 
    <input type="text" name="keywords" value="Suchen" class="span2" placeholder="Suchen" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" /><input type="image" src="templates/bootstrap/buttons/german/button_quick_find.gif" alt="" /> 
</form></li> 
            </ul> 
           </div> 

         </div> 

Answer 1

只需使用背景圖像中的文本輸入，添加一些填充到右側並刪除圖像按鈕。即

#quick_find_header input{ 
    padding-right:25px; 
    background:url(image.png) right center; 
}