如何使用jqueryui提交表格onclick如google的autosuggest?

时间:2012-02-12 20:18:21

标签: jquery jquery-ui jquery-plugins

看起来像使用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

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

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

2 个答案:

答案 0 :(得分:1)

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

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

工作示例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>

答案 1 :(得分:0)

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