Has anyone gotten scriptaculous Autocompleter to work inside a Modalbox?

Ryan

unread,

Jul 23, 2008, 7:03:35 PM7/23/08

to ModalBox

I'm trying to get autocomplete values from a scritpaculous
autocompleter to work inside a modalbox. Wondering if anyone has
gotten this to work before. I have written a sample script to
illustrate and pasted it below. It shows a simple autocomplete.Local
instance both on a page and then in a modalbox. It works when
displayed on the page but does not work when opened in a modalbox. You
need to link to your scriptaculous.js prototype.js and modalbox.js in
your filesystem to run this of course. Any suggestions?

<html>

<head>
<script src="includes/prototype.js" type="text/javascript"></
script>
<script src="includes/scriptaculous.js" type="text/javascript"></
script>
<script src="includes/modalbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="includes/modalbox.css" type="text/css"
media="screen" />
<style> div.autocomplete {
margin:0px;
padding:0px;
width:250px;
background:#fff;
border:1px solid #888;
position:absolute;
z-index:10000 !important;
}

div.autocomplete ul {
margin:0px;
padding:0px;
list-style-type:none;
}

div.autocomplete ul li.selected {
background-color:#D6DFF7;
}

div.autocomplete ul li {
margin:0;
padding:2px;
height:28px;
display:block;
list-style-type:none;
cursor:pointer;
font-size:10pt;
text-align:left;
}

div.autocomplete div.desc {
font-size:10px;
color:#888;
margin-left:12px;
}

</style>
</head>

<body>
Type letters 'R' or 'T' to get autocomplete suggestions<br>
<a href='#' onClick="Modalbox.show($('modbox'), {title: 'Modal
Box'});">Display in Modalbox</a><br>
<a href='#' onClick="Effect.toggle('modbox','appear')">Display on
Page</a>

<div id='modbox' style='display:none'>
<div>
<input name="input_box" id="input_box" autocomplete="off" size="40"
maxlength="2048" title="Search"><font size="-1">
<div id="input_box_update" class="autocomplete"
style="display:none;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
var suggestionVals = new Array(
'Ryan<div class="desc"><span class="informal">Ryan</span></div>',
'Bryan<div class="desc"><span class="informal">Bryan</span></
div>',
'Robert<div class="desc"><span class="informal">Robert</span></
div>',
'Tom<div class="desc"><span class="informal">Tom</span></div>',
'Tim<div class="desc"><span class="informal">Tim</span></div>',
'Thomas<div class="desc"><span class="informal">Thomas</span></
div>');
new Autocompleter.Local('input_box','input_box_update',
suggestionVals, { tokens: new Array(' ','!','|','('), fullSearch:
false, partialSearch: false, choices: 20 });
</script>
</div>
</div>

</html>

Justinas Urbanavicius

unread,

Jul 24, 2008, 2:52:58 AM7/24/08

to moda...@googlegroups.com

as written in the wiki, the var globals are discarted right after parsing the javascript.

try using this object instead.

eg.:
this.my_var = new Array();

then to ghet array alert(this.my_var);

Ryan

unread,

Jul 30, 2008, 5:11:38 PM7/30/08

to ModalBox

Thanks for the suggestion, but unfortunately it still does not work
when switching to use this object.. See the code below it is modified
to use the 'this' object. If you test it in a browser, the div that is
on the page works fine (autocomplete works) but when displayed in the
modalbox it does not:

</head>

<body>
Type letters 'R' or 'T' to get autocomplete suggestions<br>
<a href='#' onClick="Modalbox.show($('modbox'), {title: 'Modal
Box'});">Display in Modalbox</a><br>
<a href='#' onClick="Effect.toggle('modbox','appear')">Display on
Page</a>

<div id='modbox' style='display:none'>

this.suggestionVals = new Array(

'Ryan<div class="desc"><span class="informal">Ryan</span></div>',
'Bryan<div class="desc"><span class="informal">Bryan</span></
div>',
'Robert<div class="desc"><span class="informal">Robert</span></
div>',
'Tom<div class="desc"><span class="informal">Tom</span></div>',
'Tim<div class="desc"><span class="informal">Tim</span></div>',
'Thomas<div class="desc"><span class="informal">Thomas</span></
div>');
new Autocompleter.Local('input_box','input_box_update',

this.suggestionVals, { tokens: new Array(' ','!','|','('), fullSearch:

false, partialSearch: false, choices: 20 });
</script>

</div>

</html>

On Jul 24, 1:52 am, "Justinas Urbanavicius" <justin...@gmail.com>
wrote:

> as written in the wiki, the var globals are discarted right after parsing
> the javascript.
>
> try using this object instead.
>
> eg.:
> this.my_var = new Array();
>
> then to ghet array alert(this.my_var);
>

Ryan

unread,

Aug 25, 2008, 3:50:05 PM8/25/08

to ModalBox

Just one last attempt to see if anyone has gotten modalboxes to work
with scriptaculous autocompleters. As you can see in my last post, I
tried the suggestion to use the 'this' object. As modalboxes are a
great way to display form-based data and autocompleters are common in
forms, I figured someone must have tried this. Anyway I am stumped as
to how to get this to work, code snippets demonstrating this issue are
included in my previous post.

Ryan

On Jul 30, 4:11 pm, Ryan <ryan.roz...@gmail.com> wrote:
> Thanks for the suggestion, but unfortunately it still does not work
> when switching to use this object.. See the code below it is modified
> to use the 'this' object. If you test it in a browser, the div that is

> on the page works fine (autocompleteworks) but when displayed in the

> modalbox it does not:
>
> <html>
>
> <head>
> <script src="includes/prototype.js" type="text/javascript"></
> script>
> <script src="includes/scriptaculous.js" type="text/javascript"></
> script>
> <script src="includes/modalbox.js" type="text/javascript"></script>
> <link rel="stylesheet" href="includes/modalbox.css" type="text/css"
> media="screen" />
>
> </head>
>
> <body>

> Type letters 'R' or 'T' to getautocompletesuggestions<br>

> > > I'm trying to getautocompletevalues from a scritpaculous

> > > div.autocompleteul li {

> > > margin:0;
> > > padding:2px;
> > > height:28px;
> > > display:block;
> > > list-style-type:none;
> > > cursor:pointer;
> > > font-size:10pt;
> > > text-align:left;
> > > }
>
> > > div.autocompletediv.desc {
> > > font-size:10px;
> > > color:#888;
> > > margin-left:12px;
> > > }
>
> > > </style>
> > > </head>
>
> > > <body>

> > > Type letters 'R' or 'T' to getautocompletesuggestions<br>

infringer

unread,

Sep 1, 2008, 3:01:53 PM9/1/08

to ModalBox

Set your z-index of the autocomplete div to:

z-index:10005 !important;

Works for me.

Modalbox's z-index for "mb_window" is 10000, so setting it higher will
place it on top of the window.

I'm using v1.6.1 from SVN.

Hope that helps,
-David

> > > > </html>- Hide quoted text -
>
> - Show quoted text -

bowser_senior

unread,

Oct 18, 2008, 4:58:52 AM10/18/08

to ModalBox

I was having this same problem and I managed to solve it by creating
the Autocompleter after calling Modalbox.show() by using Modalbox's
'afterLoad' option. In my case, z-index was not at fault. The code
might look something like:

Modalbox.show( $('autocompleteContainerDiv'),
{ afterLoad: function () {
new Autocompleter.Local('inputField',
'autocompleteResultsList',
valuesList
);
}
}
);
/*
autocompleteContainerDiv contains everything I want to show in the
Modalbox, including the input field the user types into as well as the
results list that shows up with the results from the Autocompleter
*/

Hope this helps. I was struggling with this for a while myself.

-Mani

Reply all

Reply to author

Forward