主要利用html5的，input[type=search]属性来实现，此时input和type=text外观和功能没啥区别；
html代码入下:
<form action="" id="myform"> <input type="search" id="input" value="" placeholder="快速搜索" results="5" /> </form>
但要实现点击键盘右下角搜索，来发送请求，js代码如下（以下代码段记得引入jquery）：
//方法一 $("#myform").on(‘keypress‘, function(e) { var keycode = e.keyCode; var searchName = $(this).val();
//keycode是键码，13也是电脑物理键盘的 enter if(keycode == ‘13‘) { alert(2) e.preventDefault(); //请求搜索接口 } }); //方法二 //这两种都能用, 一个是在form上加id 一个是在input元素加id //对于苹果手机添加一个form元素是必要的,否则只能实现功能但是键盘的文字不能变成搜索字样 $(‘#myform‘).bind(‘search‘, function () { //coding alert(1); }); /*$(‘#input‘).bind(‘search‘, function () { alert(1); });*/
需要注意的是，input[type=search]，在用户输入时，默认情况下会自动在输入框最右侧出现一个 ‘X’，是为了方便用户点击清除所输入的内容，但是这个 X 的默认样式却可能机型不一样而不同，有的是默认一个蓝色的X，很不美观，
我们往往需要修改这个X或者直接去掉它，应该怎么实现呢？答案很简单，只要一个CSS属性即可，代码如下：
input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none;/*此处只是去掉默认的小×*/ }
只要通过 -webkit-search-cancel-button这个属性即可实现去除，去除后我们可以自定义样式；
input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; position: relative; height: 20px; width: 20px; border-radius: 50%; background-color: #EBEBEB; } input[type=search]::-webkit-search-cancel-button:after{ position: absolute; content: ‘x‘; left: 25%; top: -12%; font-size: 20px; color: #fff; }
