iPhone端AJAX AutoCompleteExtender点击列表项无法填充文本框咨询

这个问题的核心原因在于iPhone的Safari浏览器对触摸事件和点击事件的处理逻辑和桌面/安卓浏览器不同：Safari对于动态生成的非原生可点击元素（比如AutoCompleteExtender生成的列表项<li>），不会自动将触摸操作转化为click事件，而AutoCompleteExtender默认只绑定了click事件来完成选中填充的逻辑，这就导致你看到的“列表消失但TextBox没填充”的现象。

下面是几个亲测有效的解决方案，按优先级尝试：

1. 在列表加载完成后绑定触摸事件 #

利用你已经配置的OnClientPopulated事件，在列表渲染完成后给每个列表项绑定touchstart事件，手动触发click行为。修改你的客户端脚本如下：

function QuickCarline_Populated(sender, args) {
    // 获取AutoCompleteExtender的行为实例
    var autoComplete = $find('AutoEx');
    var completionList = autoComplete.get_completionList();
    var listItems = completionList.getElementsByTagName('li');
    
    // 遍历所有列表项，绑定touchstart事件
    for (var i = 0; i < listItems.length; i++) {
        listItems[i].addEventListener('touchstart', function(e) {
            // 手动触发click事件，触发AutoComplete的选中逻辑
            this.click();
            // 阻止默认触摸行为，避免页面意外滚动
            e.preventDefault();
        }, false);
    }
}

这个方法直接绕过了Safari的触摸-点击转化问题，强制在触摸列表项时触发原本的click事件逻辑，从而完成TextBox的填充。

2. 完善CSS，让Safari识别列表项为可点击元素 #

你之前只给.completionList加了cursor: pointer，但需要给内部的列表项也添加相关样式，同时加上Safari专属的触摸高亮属性，让浏览器明确知道这是可交互元素：

.completionList {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2); /* 添加触摸反馈 */
}
.completionList li {
    cursor: pointer;
    /* 确保每个列表项都有可点击的光标提示 */
}

虽然这个方法单独使用可能解决不了问题，但配合上面的触摸事件绑定，可以提升交互的兼容性和用户体验。

3. 检查FirstRowSelected属性的行为 #

你已经设置了FirstRowSelected = "true"，但在触摸设备上，这个属性的默认行为可能和预期不符。如果上面的方法生效，可以不用调整；如果依然有问题，可以在touchstart事件中手动调用AutoComplete的选中方法：

// 在touchstart事件中替换this.click()为以下代码
var index = Array.prototype.indexOf.call(listItems, this);
autoComplete._selectItem(index);

这样可以直接调用AutoCompleteExtender内部的选中逻辑，更可靠地完成TextBox填充。

内容的提问来源于stack exchange，提问作者Trent Button