在ECTouch移动端商城开发中，商品搜索是典型的流量入口。很多团队使用jQuery UI Autocomplete来实现输入联想，但在手机浏览器或APP内嵌页里，用户点开输入框弹出的触摸键盘，其右下角往往是“搜索”或“前往”键，这个键在默认情况下并不会触发Autocomplete的筛选或跳转，导致用户输完词还得手动点页面上的搜索按钮，体验割裂。要解决这个问题，必须理解移动端键盘的事件机制和ECTouch前端代码的挂载方式。
一、ECTouch中Autocomplete的默认工作方式
ECTouch的商品搜索模板通常位于theme目录下对应模版的search.html，其中会引入jquery以及jquery.ui.autocomplete.js。前端逻辑一般在ecshop对应的js文件里，通过给input绑定autocomplete方法，设置source为后台接口地址，例如search.php的ajax方法。用户在PC端输入时，每次keyup都会请求接口并返回下拉列表，选中后跳转。
但在移动端，输入法有联想和组词过程，直接keyup会导致请求过于频繁，且触摸键盘的“搜索”键并不会产生PC那样的回车键码。Autocomplete默认只监听textfield的keydown中的ENTER键（键码13），而移动端软键盘的搜索键在某些系统上根本不派发keyCode为13的事件，或者派发的是“search”类型的按键事件，这就造成了绑定失效。
二、触摸键盘搜索键的事件差异
在iOS和Android的WebView中，当input的类型为search或者表单有action时，键盘确认键会尝试提交表单，并可能触发form的submit事件，而不是input的keydown回车。若页面没有form包裹，或form被ECTouch的前端逻辑阻止默认提交，那么搜索键就毫无反应。我们可以通过监听input的keypress事件，并判断e.key === 'search'或e.keyCode === 13来兼容。
另一个常见情况是中文输入法下，用户点搜索键时正处于composition（组合输入）状态，此时直接读取input值是拼音而非中文。因此必须结合compositionstart、compositionend标记，确保搜索键触发时已经结束组词。下面给出一个基础判断逻辑：
- 给搜索input绑定compositionstart，将标志位isComposing置为true
- 绑定compositionend，将isComposing置为false，并手动调用一次搜索函数
- 绑定keypress，若e.key为search或keyCode为13且!isComposing，则执行搜索
三、改造Autocomplete的绑定代码
我们可以在ECTouch原有的autocomplete初始化之后，追加一段事件绑定。假设原代码为$("#keyword").autocomplete({source:"search.php?act=ajax"});，我们增加如下处理：
1. 阻止默认回车并自定义搜索
通过autocomplete的select事件，可以控制选中项后的跳转；通过额外绑定的keypress，可以控制键盘搜索键的行为。核心思路是：当搜索键按下，不直接依赖autocomplete内部回车，而是主动获取当前input值，调用后台接口或触发select第一项。
注意：ECTouch部分版本对ajax返回格式有固定要求，一般是JSON数组含value与label，改造时保持字段一致，否则下拉不显示。
2. 示例改造片段说明
在js文件中写入：var composing=false;$("#keyword").on("compositionstart",function(){composing=true;}).on("compositionend",function(){composing=false;}).on("keypress",function(e){if((e.key==="search"||e.keyCode===13)&&!composing){var val=this.value;if(val){window.location.href="search.php?keywords="+encodeURIComponent(val);}}});
这样用户在触摸键盘上点搜索，就会带着关键词跳转到搜索结果页，而不是只停留在联想下拉。如果希望不跳转而直接刷新列表，可以把window.location换成ajax请求并渲染局部区域。
四、不同机型的兼容处理对照
由于ECTouch常打包进APP或微信浏览器，不同内核表现不同。我们可以用一张表梳理常见环境的行为与对策：
| 运行环境 | 搜索键事件特征 | 推荐绑定方式 |
|---|---|---|
| iOS Safari | input type=search时派发search键事件 | 监听keypress中e.key==="search" |
| Android Chrome | 多数派发keyCode 13但无key | 判断keyCode===13且非组合输入 |
| 微信WebView | 可能拦截form提交 | 禁止form默认提交并手动跳转 |
| ECTouch APP内嵌 | 依赖系统WebView版本 | 同时绑search与13并加compositionend |
五、总结与排错建议
绑定触摸键盘搜索键的本质，是补上Autocomplete在移动端缺失的确认动作监听。开发者应先确认ECTouch模板里input是否被form包围、是否阻止了submit，再决定用跳转还是ajax。上线前用真机测试中文输入法下先选词再点搜索，确保compositionend已触发。
若改完仍无效，可检查jquery.ui.autocomplete.js是否被CDN缓存旧版，或在控制台打印keypress的e.key值。只要把搜索键事件和Autocomplete的source逻辑接起来，ECTouch移动商城的搜索体验就能和原生APP看齐。
jQuery_UI_AutocompleteECTouch触摸键盘搜索键修改时间：2026-08-10 22:30:47