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

Collapse
Posted by Ryan Gallimore on
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
Posted by Malte Sussdorff on
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
Posted by Malte Sussdorff on
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
Posted by Ryan Gallimore on
Malte,

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