博客

jQWidgets jqxComboBox searchMode属性

  • Post category:jquery

以下是关于“jQWidgets jqxComboBox searchMode属性”的完整攻略，包含两个示例说明：

简介

jqxComboBox件提供了 searchMode 属性，该属性用于设置下拉列表的搜索模式。通过使用 searchMode 属性，我们可以控制下拉的搜索方式，以便更好地适应不同的应用场景。

详细攻略

以下是 jqxComboBox 控件的 searchMode 属性的详细攻略：

searchMode 属性

searchMode 属性是 jqxComboBox 控件的一个属性，用于设置下拉列表的搜索模式。该属性默认值为 'containsignorecase'，表示搜索时忽略大小写并查找包含字符串的选项。

$("#jqcombobox").jqxComboBox({
   searchMode: 'startswithignorecase'
});

在上述代码中，我们将 searchMode 属性设置为 'startswithignore'，表示搜索时忽略大小写并查找以搜索字符串开头的选项。

示例1

在此示例中，我们创建了一个 jqxComboBox 控件，并将 Mode 属性设置为 'startswithignorecase'。这意味着在搜索时，下拉列表将忽略大小写并查找以搜索字符串开头的项。

<div id="jqxcombobox"></div>
<script>
 $(document).ready(function () {
        // 创建 jqxComboBox 控件并将 searchMode 设置为 'startswithignorecase'
        var data = [
            'Apple',
            'Banana',
            'Cherry',
            'Grape',
            'Orange'
        ];
 $("#jqxcombobox").jqxComboBox({
            source: data,
            width: '200px',
            height: '25px',
            searchMode: 'startswithignorecase'
        });
    });
</script>

在上述代码中，我们创建了一个 jqxComboBox 控件，并将 searchMode 属性设置为 'startswithignorecase'。这意味着在搜索时，下拉列表将忽略大小写并查找以搜索字符串开头的选项。

示例2

在此示例中，我们创建了一个 jqxComboBox 控件，并在 change 事件中显示所选选项的索引和标签。

 id="jqxcombobox"></div>
<div id="result"></div>
<script>
 $(document).ready(function () {
        // 创建 jqxComboBox 控件
        var data = [
            'Apple',
            'Banana',
            'Cherry',
            'Grape',
            'Orange'
        ];
 $("#jqxcombobox").jqxComboBox({
            source: data,
            width: '200px',
            height: '25px',
            change: function (event) {
                // 在 change 事件中显示所选选项的索引和标签
                var item = $("#jqxcombobox").jqxComboBox('getSelectedItem');
                var index = $("#jqxcombobox").jqxComboBox('selectedIndex');
                $("#result").text('所选选项的索引：' + index + '，标签：' + item.label);
            }
        });
    });
</script>

在上述代码中，我们创建了一个 jqxComboBox 控件，并在 change 事件中显示所选选项的索引和标签。在 change 事件中，我们使用 getSelectedItem() 方法获取所选选项的对象，并使用 selectedIndex() 方法获取所选选项的索引。然后，我们将所选选项的索引和标签显示在页面上。

Tags: