如何使用jqueryui像Google的自动建议一样提交onclick表单?

编程入门 行业动态 更新时间:2024-10-10 03:24:08
本文介绍了如何使用jqueryui像Google的自动建议一样提交onclick表单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

看起来将类别与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表单?

本文发布于:2023-11-24 21:58:55,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1627012.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:表单   如何使用   建议   Google   jqueryui

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!