如何使用 jqueryui 提交表单 onclick 像 google 的 autosuggest？答案

【问题标题】：How to submit form onclick like google's autosuggest with jqueryui?如何使用 jqueryui 提交表单 onclick 像 google 的 autosuggest？
【发布时间】：2012-02-12 20:18:20
【问题描述】：

看起来在 jqueryui 中使用类别让事情变得有点复杂。我试过这个：

<script type="text/javascript">
$(document).ready(function() {
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var self = this,
                currentCategory = "";
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                self._renderItem( ul, item );
            });
        },

      select: function(event, ui) { 
        $("input#autocomplete_text").val(ui.item.value);
        $("#autocomplete_form").submit();
      }
    });
    $( "#autocomplete_text" ).catcomplete({
        delay: 0,
        source: function(request, response) {
                $.ajax({ url: "<?php echo site_url('autocomplete/suggestions'); ?>",
                data: { term: $("#autocomplete_text").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                    response(data);
                }
            });
        }
    });
});
</script>

用那个表格：

                    <form id="autocomplete_form" name="input" action="autocomplete/redirect" method="post">
                        <input size="38" type="text" id="autocomplete_text" name="autocomplete_text" value="İlan kodu, kategori, ilan veya emlakçı ara" />
                        <input type="hidden" id="data" name="data" value="0" />
                        <input class="submit-button" type="submit" value=" EMLAK ARA " />
                    </form>

我的example

我想做的是，点击建议列表中的项目后提交表单。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

您的示例对我有用，只是无法发布，因为它是 PHP 错误。您究竟需要什么帮助？
@dannix 你读过 questino 的标题吗？我想要做的是，点击建议列表中的项目后提交表单。
我同意了，但不明白您要在选择建议后提交。
@dannix 我已经更新了问题以便澄清。对不起。
没问题 :-) 我已经发布了我的答案。无法解释为什么你的方式不起作用。

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

从 ui.autocomplete init 函数中删除 select: 函数并将其移至 catcomplete 函数

嵌入式 PHP 和依赖您的服务器响应类别使得在您的 Web 域之外为我们进行编辑变得很麻烦。

工作示例 jsfiddle 少了 ajax 的东西。

<script type="text/javascript">
$(document).ready(function() {
$.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category +   "</li>" );
                currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });
    }
});
$( "#autocomplete_text" ).catcomplete({
    delay: 0,
    select: function(event, ui) { 
    $("#autocomplete_form").submit();
  },
    source: function(request, response) {
            $.ajax({ url: "<?php echo site_url('autocomplete/suggestions'); ?>",
            data: { term: $("#autocomplete_text").val()},
            dataType: "json",
            type: "POST",
            success: function(data){
                response(data);
            }
        });
    }
});
});
</script>

【讨论】：

【解决方案2】：

我建议你应该先检查你的 php 文件。你得到 Undefined variable: link.. 这意味着 $link 变量没有设置或者你的 ajax 中的数组没有通过。

【讨论】：

我更新了我的问题。提交表单不是问题，问题是选择项目后提交按钮。像“onselect”
我看到的唯一解决方案是您进行点击事件并设置一个值。为此，我建议您使用包装您的类别。然后说 $('').click(function(){var item=$(this).html(); });之后，只需在单击提交按钮时将 var 项作为搜索词发送。