未来之窗昭和仙君 - cyberwin_fairyalliance_webquery

comb增强输入框下拉列表功能说明

一、功能概述

comb增强输入框下拉列表功能专为处理关联<datalist>的文本输入框设计，通过$cq (cyberwin_query) 提供的API，可以轻松获取输入框中已选择的值所对应的额外数据属性，实现类似下拉列表的增强功能，同时保留输入框的灵活性。

该功能特别适用于需要既允许自由输入又需要提供预设选项，且预设选项包含额外数据的场景，如产品搜索框（输入产品名称，获取产品ID）、地址选择（输入地址，获取区域编码）等。

二、核心函数与参数

函数名	参数	返回值	功能说明
`输入选择data()`	`dataKey`（字符串，必选）：数据属性键名（不含data-前缀）	字符串：匹配项的对应数据值 null：无匹配项或发生错误	获取与输入框关联的datalist中，当前输入值所匹配选项的指定数据属性

使用条件

该函数仅适用于满足以下条件的元素：

必须是<input>元素
输入框类型必须为text（即type="text"）
必须通过list属性关联到一个<datalist>元素
关联的<datalist>中包含带有data-*属性的<option>

三、使用示例

假设有如下关联datalist的输入框：

<input type="text" id="productInput" list="products" placeholder="输入产品名称...">  <datalist id="products"> <option value="东方仙盟压缩工具" data-product_id="FA-2025-001" data-price="99"></option> <option value="未来之窗浏览器" data-product_id="FA-2025-002" data-price="199"></option> <option value="昭和仙君开发套件" data-product_id="FA-2025-003" data-price="299"></option> <option value="仙盟云存储服务" data-product_id="FA-2025-004" data-price="399"></option> </datalist>

交互演示：

结果将显示在这里...

获取当前选择产品的ID：

// 获取输入框中选中产品的ID const productId = $cq('#productInput').输入选择data('product_id'); console.log('产品ID:', productId); // 当选择"东方仙盟压缩工具"时，输出: "FA-2025-001"

获取当前选择产品的价格：

// 获取输入框中选中产品的价格 const productPrice = $cq('#productInput').输入选择data('price'); console.log('产品价格:', productPrice); // 当选择"未来之窗浏览器"时，输出: "199"

在表单中实时获取选中项的数据并自动填充其他字段：

// 监听输入框变化 $cq('#userInput').on('input', function() { // 获取选中用户的ID const userId = $cq(this).输入选择data('user_id'); // 获取选中用户的邮箱 const userEmail = $cq(this).输入选择data('email'); // 自动填充到表单其他字段 if (userId && userEmail) { $cq('#userId').val(userId); $cq('#userEmail').val(userEmail); } });