Customizing Ajax Search

6 Posts

jst4fun Reply #1, 16 years, 5 months ago

Hi,
I am quite new to modx and I am creating a site on it as part of my clients requirement. I would like to implement a website search into this site. I think ajax search would suit my needs. I was able to show the snippet on my home page. my client have already provided a template for the site and I need to set everything as displayed in the template. Now the problem is that in the template instead of the go button it is an image with the wordings go. So I need to remove the go button underneath the search box and replace it with a go image and place it to the right of the text box. Is it possible to change the layout to the way i want? I hope someone would help me to solve this problem. Thank you

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 5 months ago

That would be done in the template. See the includes/templates.inc.php file for the default template used.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

6 Posts

jst4fun Reply #3, 16 years, 5 months ago

Well I was able to do that by editing the template file for ajax search located at /assets/snippets/AjaxSearch/includes/. I am not sure if that is the correct method but still it works now. I got a few doubts. There is some thing like this on the template file

'layout' => '
		[+as.form+]
		[+as.intro+]
		[+as.results+]',

What is this [+as.form+] ? is there any good tutorial on creating a snippet along with its template? I had gone through http://modxcms.com/adding-snippets.html but it do not tells us regarding the above array elements. So any good help on creating snippets ?

1,717 Posts

coroico Reply #4, 16 years, 5 months ago

Hi jst4fun,

In the template instead of :

	
  //Form Template
	'form' => '
  <form [+as.formId+]action="[+as.formAction+]" method="post">
			<label for="ajaxSearch_input">
				<input id="ajaxSearch_input" 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>
		</form>',

try something like :

	//Form Template
	'form' => '
  <form [+as.formId+]action="[+as.formAction+]" method="post">
			<label for="ajaxSearch_input">
				<input id="ajaxSearch_input" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
			</label>
			<label for="ajaxSearch_submit">
				<input id="ajaxSearch_submit" border=0 src="http://your.domain/images/yourimage.gif " type="image" align="middle" type="submit" name="sub" value="[+as.submitText+]" />
			</label>
		</form>',

where : "http://your.domain/images/image.gif " is your url image. But is probably better to do give a relative path to your image as "images/image.gif"

Adapt the css tag ajaSearch_submit to style the image.