如何使用jqueryui像Google的自动建议一样提交onclick表单? [英] How to submit form onclick like google's autosuggest with jqueryui?

问题描述

看起来将类别与jqueryui一起使用会使事情变得有些复杂.我已经尝试过了:

Looks like using categories with jqueryui made things a little bit complicated. I have tried this:

<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> 

我的示例

我想做的是，在建议列表中单击一个项目后提交表单.

What i want to do is, submit form after clicking on an item in the suggestions list.

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

Any help will be appreciated. Thanks in advance.

推荐答案

从ui.autocomplete初始化函数中删除select:函数，并将其移至catcomplete函数

Remove the select: function from the ui.autocomplete init function and move it to the catcomplete function

嵌入式PHP以及对服务器的依赖以及对类别的响应，使得在您的网络域之外为我们进行编辑变得很麻烦.

Embedded PHP and reliance on your server responding with categories makes editing for us outside your web domain a hassle.

工作示例 jsfiddle 减去ajax内容.

Working example jsfiddle less the ajax stuff.

<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>

这篇关于如何使用jqueryui像Google的自动建议一样提交onclick表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！