【问题标题】：Hide search icon jQuery mobile listview filter隐藏搜索图标 jQuery mobile listview 过滤器
【发布时间】：2013-12-14 09:40:38
【问题描述】：

如何在 jQuery mobile listview 过滤器中隐藏搜索图标。

我想使用类似自动完成输入框，不带任何图标。

【问题讨论】：

(".ui-icon-searchfield").removeClass("ui-icon-searchfield");.

标签： jquery jquery-mobile jquery-mobile-listview

【解决方案1】：

没有任何图标的自动完成输入框

<DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <style>
        .ui-input-search .ui-input-clear {display: none;}
        .ui-icon-searchfield: after {display: none;}
    </style>        
</head>
<body>
    <div data-role="page" id="myPage1">
        <div data-role="content" id="content">
            <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
                <li><a href="#">Acura</a>
                </li>
                <li><a href="#">Audi</a>
                </li>
                <li><a href="#">BMW</a>
                </li>
                <li><a href="#">Cadillac</a>
                </li>
                <li><a href="#">Chrysler</a>
                </li>
                <li><a href="#">Dodge</a>
                </li>
                <li><a href="#">Ferrari</a>
                </li>
                <li><a href="#">Ford</a>
                </li>
                <li><a href="#">GMC</a>
                </li>
                <li><a href="#">Honda</a>
                </li>
                <li><a href="#">Hyundai</a>
                </li>
                <li><a href="#">Infiniti</a>
                </li>
                <li><a href="#">Jeep</a>
                </li>
                <li><a href="#">Kia</a>
                </li>
                <li><a href="#">Lexus</a>
                </li>
                <li><a href="#">Mini</a>
                </li>
                <li><a href="#">Nissan</a>
                </li>
                <li><a href="#">Porsche</a>
                </li>
                <li><a href="#">Subaru</a>
                </li>
                <li><a href="#">Toyota</a>
                </li>
                <li><a href="#">Volkswagen</a>
                </li>
                <li><a href="#">Volvo</a>
                </li>
            </ul>
        </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

我会更改输入字段的填充，然后将图标设置为不显示：

.ui-input-search {
  padding: 0 .4em !important;
}

.ui-icon-searchfield:after {
  display: none !important;
}

【讨论】：