Gardy
01-19-2011, 10:52 AM
Hey all,
I'm trying to sort out a predictive search for my website but can't seem to get it to work, so i was wondering if someone could help?
I have done some testing and know for sure that the PHP script works and finds the correct results, and that the JS function is being fired when the user types in to the search box, but I cannot get the results to show up.
Any help here would be appriciated.
Thanks.
The code I have so far is as follows -
JaveScript
function predictive_search(value){
if(value !== '') {
$.get('?page_id=128', { 'term': $('#predictive-search').val() }, function(results){
$('#predictive-results').html(results);
});
}
}
HTML
<form role="search" method="get" id="searchform" action="<? bloginfo('home'); ?>/" >
<div>
<label class="screen-reader-text" for="s"><b>Search the help desk: </b></label>
<input type="text" value="Search..." onkeyup="predictive_search(this.value)" onfocus="if(this.value==this.defaultValue){this.value=''}" onblur="if(this.value==''){this.value=this.defaultValue}" name="s" id="predictive-term" />
<input type="submit" id="searchsubmit" value=" " />
</div>
<div id="predictive-results" class="predictive-search-list"></div>
</form>
PHP
$query = "
SELECT ID, post_title, guid
FROM $wpdb->posts
WHERE post_title LIKE 'test%'
AND post_type='helpdesk_ticket'
AND post_status='publish'";
$tickets = $wpdb->get_results($query, OBJECT);
if(!empty($tickets)){
foreach($tickets as $ticket){
?>
<ul id="predictive-search-list">
<a href="<?php echo get_permalink($ticket->ID); ?>">
<li><?php echo $ticket->post_title; ?></li>
</a>
</ul>
<?php
}
}
?>
I'm trying to sort out a predictive search for my website but can't seem to get it to work, so i was wondering if someone could help?
I have done some testing and know for sure that the PHP script works and finds the correct results, and that the JS function is being fired when the user types in to the search box, but I cannot get the results to show up.
Any help here would be appriciated.
Thanks.
The code I have so far is as follows -
JaveScript
function predictive_search(value){
if(value !== '') {
$.get('?page_id=128', { 'term': $('#predictive-search').val() }, function(results){
$('#predictive-results').html(results);
});
}
}
HTML
<form role="search" method="get" id="searchform" action="<? bloginfo('home'); ?>/" >
<div>
<label class="screen-reader-text" for="s"><b>Search the help desk: </b></label>
<input type="text" value="Search..." onkeyup="predictive_search(this.value)" onfocus="if(this.value==this.defaultValue){this.value=''}" onblur="if(this.value==''){this.value=this.defaultValue}" name="s" id="predictive-term" />
<input type="submit" id="searchsubmit" value=" " />
</div>
<div id="predictive-results" class="predictive-search-list"></div>
</form>
PHP
$query = "
SELECT ID, post_title, guid
FROM $wpdb->posts
WHERE post_title LIKE 'test%'
AND post_type='helpdesk_ticket'
AND post_status='publish'";
$tickets = $wpdb->get_results($query, OBJECT);
if(!empty($tickets)){
foreach($tickets as $ticket){
?>
<ul id="predictive-search-list">
<a href="<?php echo get_permalink($ticket->ID); ?>">
<li><?php echo $ticket->post_title; ?></li>
</a>
</ul>
<?php
}
}
?>