Forum OpenACS Development: Re: User Smart Search Widget with Ajax

Collapse
2: Re: User Smart Search Widget with Ajax (response to 1)
Posted by Malte Sussdorff on 12/17/06 07:28 AM
Two questions:

a) I added this to contacts. When I wrote my lookup.tcl (which does the search) I returned the html just like you did, but in my resultbox it is quoted. Any idea on how to fix this?

b) What CSS magic do I have to do so the result box does not push the page downwards but just floats over it.

Other than that: Great!

Collapse
3: Re: User Smart Search Widget with Ajax (response to 2)
Posted by Ryan Gallimore on 12/17/06 06:21 PM
Great to hear this is being added to contacts!

a) Does noquote-ing not work? I don't remember how I did it, but the quoting method suggested in the ajaxhelper docs should do it.

b) Just add this to the CSS of the results div:

div.results_box {
overflow: auto;
width: 200px;
height: 300px;
}

and you'll get a box of 200x300 with a scrollbar if any text goes beyond those dimensions.

Cheers.

Collapse
4: Re: User Smart Search Widget with Ajax (response to 3)
Posted by Malte Sussdorff on 12/18/06 09:30 AM
Excellent, your trick worked. And with regards to a). Well, it would help if my lookup.adp would actually do the noquoting :).

So, now I have a page which supports what you did. Sadly I wanted to integrate it into the main search page for contacts and get these JS errors:

form has no properties
prototype.js (line 119)
anonymousprototype.js (line 119)
anonymousprototype.js (line 117)

In this ad_form generated form:

<form name="search" method="GET"
                    action="/intranet/contacts/"><input type="hidden" name="form:mode" value="edit" />
<input type="hidden" name="form:id" value="search" />
<!-- Form elements -->
  <input type="hidden" name="__confirmed_p" value="0" /><input type="hidden" name="__refreshing_p" value="0" /><input type="hidden" name="__submit_button_name" value="" /><input type="hidden" name="__submit_button_value" value="" /><input type="hidden" name="orderby" value="first_names,asc" /><input type="hidden" name="page_size" value="1" /><input type="hidden" name="format" value="normal" /><input type="hidden" name="extended_columns" value="" />
                  <span class="form-widget">
                <select name="search_id"  onChange="javascript:acs_FormRefresh('search')">
<option value="" selected="selected">All Contacts</option>
</select>
</span>
                  <span class="form-widget">
                <input type="text" name="query" value="" maxlength="255" autocomplete="off" onKeyUp="new Ajax.Updater ('results_box','lookup',{asynchronous:true,method:'post',parameters:Form.serialize('search')});  document.getElementById('results_box').style.visibility='visible';" size="20" />
              </span>
            <span class="form-element">
              <input type="submit" name="save" value="Search" />
            </span>
                  <span class="form-label">
                    &nbsp;&nbsp;<span style="font-size: smaller;">Results 136 </span>
              </span>
                  <span class="form-widget">
                <input type="hidden" name="results_count" />
              </span>
        </form>

Whereas the following form works like a charm:

<form id="searchform" method="post" action="/intranet/contacts/">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>

      <input type="text" name="query" id="query" onKeyUp="new Ajax.Updater ('results_box','test/lookup',{asynchronous:true,method:'post',parameters:Form.serialize('searchform')});  document.getElementById('results_box').style.visibility='visible';" autocomplete="off" value="" />
    </td>
  </tr>
  <tr>
    <td>
      <div id="results_box"></div>
    </td>
  </tr>
</table>
</form>

Collapse
5: Re: User Smart Search Widget with Ajax (response to 3)
Posted by Malte Sussdorff on 12/18/06 09:45 AM
Okay, actually I have to take two things back.

a) In my form the results_box was missing, but even when I added it the thing did not work at all.

b) The overflow statement did not work. It pre reserves the space it needs (width / height) and thats it.

Collapse
6: Re: User Smart Search Widget with Ajax (response to 5)
Posted by Ryan Gallimore on 12/18/06 08:27 PM
Malte,

Do you have a URL I can take a look at?