個功能的實現主要使用了jsonp跨域訪問, 然后通過回調函數來將搜索到的關聯內容顯示出來 。

JSONP(JSONwith Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

回調函數：當一個函數作為另一個函數的參數時，那么這個函數就是回調函數。

效果如下

代碼如下

TML如何制作在透明輸入框里面添加圖標

最近在寫一個律師推薦前臺的網站，在上面搜索框這里出現了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題 ：

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面，然后將輸入框的border設置為0px，最后設置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)設置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間 ）

續分享wordpress建站教程。之前悅然wordpress建站在幫客戶做外貿建站時遇到一個需求，他們想在導航欄上顯示傳統的搜索框，而不是那種彈出式的搜索框，而我使用的那個wordpress主題默認都使用的是彈出式搜索框，現在絕大多數主題應該都是用的這種，一般來說這沒什么問題，彈出式的搜索框效果還更好一些。但是用戶需求高于一切，能實現肯定要盡量去實現的。

作者：悅然wordpress建站

步驟一：添加代碼到Function.Php

不多廢話，下面直接分享一段代碼：

add_filter('wp_nav_menu_items','add_search_box', 9, 2);
function add_search_box($items, $args) {
ob_start();
get_search_form();
$searchform = ob_get_contents();
ob_end_clean();
$items .= '<li>' . $searchform . '</li>';
return$items;
}

以上代碼可以不做改動，直接添加到當前wordpress建站主題的function.php文件中即可。

如上圖所示，這樣就會得到一個默認的搜索框，使用的是wordpress自帶的搜索功能。搜索框的樣式可以通過CSS來修改，一般默認就行了。

步驟二：增強默認搜索框功能

因為是做的B2B產品展示型的wordpress外貿建站，用戶主要需要的是對產品的搜索功能，而wordpress默認的是全局搜索，這個有點不太好。接下來我們可以使用ivory search這個搜索增加插件來對默認搜索框的功能進行限制。

vory search插件可以免費下載，后臺搜索安裝即可，啟用后如上圖所示，按實際需要限制搜索類型，然后保存即可生效。