个功能的实现主要使用了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插件可以免费下载，后台搜索安装即可，启用后如上图所示，按实际需要限制搜索类型，然后保存即可生效。