在facebox上自动完成jQuery

时间:2011-02-09 07:36:43

标签: jquery ajax jquery-plugins autocomplete facebox

我需要在文本输入中使用自动完成功能(特别是我尝试使用此插件http://scottreeddesign.com/project/jsuggest),它位于面板中。但它没有工作,因为在文件准备好了我的功能:

                $(document).ready( function(){              

                        /** suggest new Quid **/
                        $('#idInput').jSuggest({
                             default_text: 'Inserisci il quid',
                             terms_url:      'data.php'+'%input%',
                             limit: 10
                        });   

                        $('#idLink').live('click', function(e) {  jQuery.facebox("<input type='text' id='idInput' />") });
                });

但最初dom #idInput不存在,只有当我点击一个链接时才会在facebox中显示。

你能帮帮我吗?有什么建议吗?

P.S。 插件jsuggest不是必需的。这是我发现的第一个。

2 个答案:

答案 0 :(得分:2)

解决方案是在点击事件上绑定jSuggest插件:

 $('#idLink').live('click', function(e)
  {
    jQuery.facebox("<input type='text' id='idInput' />").jSuggest(
       {
          default_text: 'Inserisci il quid',
          terms_url:      'data.php'+'%input%',
          limit: 10
       });
  });

或者更好:

 $('#idLink').live('click', function(e)
  {
    $("<input type='text' id='idInput' />").jSuggest(
       {
          default_text: 'Inserisci il quid',
          terms_url:      'data.php'+'%input%',
          limit: 10
       }).facebox();
  });

修改: 上面的解决方案不起作用然后试试这个:

 $('#idLink').live('click', function(e)
  {
    $input = $("<input type='text' id='idInput' />");
    $input.jSuggest(
       {
          default_text: 'Inserisci il quid',
          terms_url:      'data.php'+'%input%',
          limit: 10
       });
    $input.facebox();
  });

无论如何,我建议你使用jquery-ui的autocomplete

答案 1 :(得分:0)

这是我尝试的解决方案,它的工作原理!谢谢大家!

我使用了这个插件:http://www.pengoworks.com/workshop/jquery/autocomplete.htm

               $(document).ready( function(){              

                        $('#idLink').live('click', function(e) {  

                            jQuery.facebox("<input type='text' id='idInput' />") });

                            /** suggest **/
                            $('#idInput').jSuggest({
                                default_text: 'default text here',
                                terms_url:      'data.php'+'%input%',
                                limit: 10
                            });   
                        });