jQuery 自动完成 - 类别不显示,而标签显示

发布于 2024-12-08 15:33:20 字数 2146 浏览 0 评论 0原文

这是我的代码: 我想在自动完成中添加一个“标题”,通知用户一些事情,所以我想使用“类别”。 但这不起作用。 显示“标签”中的值,但不显示类别。 这段代码有什么问题吗? 也许我以错误的方式构建 availableTags ?但自动完成仍然建议标签...

$(function() {
    var jsonArray = <?php echo $jsonValuesSearch; ?>;
    var availableTags = [];var i=0;
            for (var indeks in jsonArray){
                var pom = {
                    "label"  : jsonArray[indeks],
                    "category" : "Tagi"
                };
                availableTags[i] = pom;
                i++;

            }
    function split( val ) {
                    return val.split( " " );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#tags_search" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 0,
            source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
            }
        });
});

这就是我创建 json 表的方式:

    $items = Doctrine::getTable('Tags')->findAll()->toKeyValueArray('id', 'name');
    $this->view->jsonValues = Zend_Json_Encoder::encode($items);

This is my code:
I would like to have a "title" in autocomplete, informing user about some things, so I wanted to use "category".
But it doesn't work.
The values in "label" are displayed, but category isn't.
What is wrong about this code?
Maybe I'm constructing availableTags in the wrong way? But still autocomplete suggests labels...

$(function() {
    var jsonArray = <?php echo $jsonValuesSearch; ?>;
    var availableTags = [];var i=0;
            for (var indeks in jsonArray){
                var pom = {
                    "label"  : jsonArray[indeks],
                    "category" : "Tagi"
                };
                availableTags[i] = pom;
                i++;

            }
    function split( val ) {
                    return val.split( " " );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#tags_search" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 0,
            source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
            }
        });
});

This is how I create json table:

    $items = Doctrine::getTable('Tags')->findAll()->toKeyValueArray('id', 'name');
    $this->view->jsonValues = Zend_Json_Encoder::encode($items);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

东走西顾 2024-12-15 15:33:20

当 jQuery 的 UI Autocomplete 获取 label: 和 value: 的 JSON 时,它会在下拉列表中显示标签项,并且在选择时将 value 项设置为输入框的值。根据您的情况,您可以有其他内容,例如类别:。你的 select: 选项有 this.value 和 item.value,但是你的 JSON 没有 value: - 所以 Autocomplete 不知道在 select 中做什么。如果您希望标签项和类别项都显示在下拉框中,则需要 success: 选项以及按您想要的方式连接它们的表达式。查看自动完成文档页面中的源代码,了解如何执行此操作的一些示例。然后只需按照所需的顺序和标点符号替换变量即可。

When jQuery's UI Autocomplete gets fed JSON of label: and value:, it displays the label items in the dropdown, and when selected, it sets the value item as the value of the input box. You can have additional things, like category:, in your case. Your select: option has this.value and item.value, but your JSON has no value: - so Autocomplete does not know what to do in select. If you want both label items and category items to show in the dropdown box, you need a success: option with an expression that concatanates them the way you want. Look at the source code in the Autocomplete documentation page for some examples of how to do that. Then just replace your variables in the sequence and punctuation that you want.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文