使用 jQuery Mobile 1.4.2 远程自动完成列表视图提交表单？

Posted 2023-05-09

【中文标题】使用 jQuery Mobile 1.4.2 远程自动完成列表视图提交表单？

【英文标题】：Form submission using jQuery Mobile 1.4.2 remote autocomplete listview?

【发布时间】：2014-05-31 15:18:00

【问题描述】：

我有一个包含多个字段的表单，包括使用<ul data-role="listview"> 的远程自动完成字段，如 jQuery Mobile 1.4.2 文档所述。在桌面视图中，我使用带有 jQ​​uery UI 自动完成功能的 <input> 字段。我在 <ul> 移动自动完成字段上收到 jQuery 验证错误，因为 jQM 创建的 <input> 字段不包含该值。顺便说一句，我正在使用 MVC 5 进行不显眼的验证。

这是我正在使用的 jQuery Mobile html 代码：

<div data-role="page" id="myPage">
    <div id="myFormDiv" class="ui-content" data-theme="a" role="main">
        <form id="myForm" method="post" data-ajax="False" action="/MyController/SetVal">
            <div class="validation-summary-errors">
                <table>
                    <tbody>
                        <tr>
                            <td class="myInput">
                                <ul id="field1" data-role="listview" data-inset="true" data-filter="true"></ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <input type="submit" id="done" name="btnSubmit" value="Done" data-mini="true" data-inline="true" data-theme="a" />
        </form>
    </div>
</div>

我正在通过 JS 自己处理表单 POST，如下所示：

$.post($form.attr('action'), $form.serializeArray()) // ... code snipped

我看到 field1 的表单数据没有出现，因为 jQM 为 <ul> 标签创建的 <input> 字段不包含 value 属性。

是否可以使用 jQM 1.4 远程自动完成列表视图进行表单提交？

【问题讨论】：

你将不得不展示一些代码。见：***.com/help/how-to-ask

@Sparky 我添加了代码示例和答案。请给我点个赞好吗？

【参考方案1】：

我通过在<td class="myInput"> 标记下方放置一个隐藏的<input> 并在选择列表视图项时设置该隐藏输入的值来解决此问题。