search results not displaying properly with ajaxsearch

- 2 Posts
richardjj66 Reply #1, 17 years ago

Hi, I am using the following code to perfom a search:

<input id="ajaxSearch_input" maxlength="128" type="text" name="search" size="15" value="search" title="Enter the terms you wish to search for." class="form-text" onblur="if(this.value==’’) this.value=’search’" onfocus="if(this.value ==’search’ ) this.value=’’" type="text" />
<input id="ajaxSearch_submit" type="submit" name="sub" class="form-submit" value="Search" />

The problem i’m having is that when the results are displayed and a user clicks on one of the search results, the formatting and css seems messed up when ajaxsearch displays that page with the search results.

Do you have to configure the css separately for the pages that ajaxsearch displays with the highlighted search terms?

thanks for your help
- 1,717 Posts
coroico Reply #2, 17 years ago
Richard, this is not the correct way to use the AjaxSearch snippet.

extract from http://wiki.modxcms.com/index.php/AjaxSearch
Creating your first search (non-ajax mode)

In a document:

1. Put the snippet call [!AjaxSearch? &ajaxSearch=`0`!] in the document content area and save the document
2. Check Published and Searchable on the Page Settings tab

To show the results in other page:

1. Put the snippet call [!AjaxSearch? &ajaxSearch=`0` &AS_landing=`x`!] in the document content area and save the document. Here x is the id of your results page.
2. Check Published and Searchable on the Page Settings tab
3. Create the page #x with the snippet call [!AjaxSearch? &ajaxSearch=`0` &AS_showForm=`0`!]
And if you want change the displaying of results, adapt the provided templates. For instance in your case add in the snippet call &tplLayout=`myLayout` where myLayout is a chunk containing an adpatation of the current code:
```
[+as.showForm:is=`1`:then=`
<form [+as.formId+] action="[+as.formAction+]" method="post">
    <fieldset>
    <input type="hidden" name="advSearch" value="[+as.advSearch+]" />
    <label for="ajaxSearch_input">
      <input id="ajaxSearch_input" class="cleardefault" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
    </label>
    <label for="ajaxSearch_submit">
      <input id="ajaxSearch_submit" type="submit" name="sub" value="[+as.submitText+]" />
    </label>
    </fieldset>
</form>
`+]
[+as.showIntro:is=`1`:then=`
<p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>
`+]
[+as.showResults:is=`1`:then=`
[+as.results+]
`+]
```
- Don’t remove the placeholders like [+as.xxx] otherwise nothing could work:
[+as.showForm:is=`1` is used to display or not the input form
[+as.showResults:is=`1` is used to display or not the results
[+as.results+] show the results (to understand look at paging, results and result templates).
- If you don’t want the intro message, remove the block:
```
[+as.showIntro:is=`1`:then=`
<p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>
`+]
```
To style the input form and the results look at the html code generated and the css files provided in the documentation folder.