如何在同一页面上使用两次jquery自动完成

时间:2012-07-04 14:42:29

标签: jquery jquery-ui autocomplete jquery-autocomplete

我的问题是我应该在同一页面中两次使用jquery自动完成库。

当我静态插入第一个文本字段时,自动完成工作正常。但是,如果我想插入第二个文本字段,则会显示第一个文本字段的自动填充结果。

两个文本字段都有不同的名称和ID,但是当我在文本字段2中键入字符时,自动填充结果显示在文本字段1下面。我的自动完成功能有什么问题?

            var aramaKeyword = jQuery.trim($("#input_header_scroll_ara_keyword").val());
            $('#input_header_scroll_ara_keyword').val(aramaKeyword);

            $(function() {
                $("#input_header_scroll_ara_keyword").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            url: baseUrl + "<?php echo URL_ARAMA_AUTOCOMPLETE; ?>",
                            dataType: "json",
                            async: false,
                            data: {
                                q: jQuery.trim($("#input_header_scroll_ara_keyword").val())
                            },
                            success: function(data) {
                                response( $.map( data, function( item ) {
                                    return {
                                        label: item,
                                        value: item
                                    }
                                }));                    
                            }
                        });
                    },
                    select: function(event, ui) {
                        var keyword = ui.item.value;
                        locateAraQuery('<?php echo URL_ARAMA; ?>', '<?php echo DEFAULT_STR_ARAMAQUERY_KEYWORD; ?>', '<?php echo lang('title_aradefaultkeyword'); ?>', keyword, '<?php echo ARAMA_SUFFIEX_BAR; ?>'); 
                    },

                    focus: function(event, ui) {
                        var keyword = ui.item.value;
                        $("#input_header_scroll_ara_keyword").val(keyword);             
                    },
                    minLength: 2,
                });
            });

1 个答案:

答案 0 :(得分:0)

好的,我找到了解决方案。

appendTo: $("#input_header_scroll_ara_keyword").parent()

为我工作。