Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.

Good Working autosuggest with Smarty and Ajax

 
Post new topic   Reply to topic    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
jimmy230
Smarty Rookie


Joined: 14 Mar 2009
Posts: 9

PostPosted: Sat Mar 14, 2009 4:06 am    Post subject: Good Working autosuggest with Smarty and Ajax Reply with quote

I have been working with smarty for long time but i am no really good ok.. so anyway i spent last week searching for a good script to add to my website so i decided for this one "Nodstrumdotcom i really like it but one thing I needed to use MySqli which i dont have intalled, so I went to the code to try to find an answer and make a smarty to get working. so this is what i wanted, fist in my autosuggest wanted to view name and a small image. spent 6 days i finnaly got running, i really like it so I thoug I should share the code it was not really hard it just that i am no really good , i am still learning but any ways this is what i did.

first i downloaded de script from Nodstrumdotcom, i went trough the files , i know there shoul be some way to get it running into smarty, so i decided to make my own calls, ths script has a php file that makes calls to mysqli, mmmmmmm no good i donīt have it installed, so what if i just make my calls inmy own so thats what i did

it was no really hard, just I am no really smart. ok lets start
this is my first file all you can understan this file

this is my buscara.php
**************************************************
require('config.php');

$_action = isset($_REQUEST["action"]) ? $_REQUEST["action"] : 'busca';
switch($_action)
{

case 'busca':
$queryString=$_POST["queryString"];
$RecVideo->search_now($queryString);
break;
***************************************************
now this is my function, i added to my main php file i just copied this funcion here so you can understand, this will handle all calls from my
main file buscame.tpl
***************************************************
function search_now($queryString)
{

if($queryString){

$resultv = "SELECT * FROM videocat WHERE nombre LIKE \"%$queryString%\" ORDER BY id DESC LIMIT 10" ;
$resultv=mysql_query($resultv) or die (mysql_error());
$result=mysql_num_rows($resutv);


$i=0;
while ($row2 = mysql_fetch_array($resultv))
{
$res_id[$i] = $row2['id'];
$res_nombre[$i] = $row2['nombre'];
$res_imagen[$i] = $row2['imagen'];
$i++;
}

$this->tpl->assign('res_nombre', $res_nombre);
$this->tpl->assign('res_imagen', $res_imagen);
$this->tpl->assign('res_id', $res_id);
$this->tpl->display('resultadosb.tpl');

}
else
{
$this->tpl->display('error.tpl');
}

}

***********************************************
now this is my TPL resultadosb.tpl will show all my results
I added an image and text because thats how i wanted. bu you can add
more values o just the text value.
***********************************************

<table border="0" width="300" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td>{section name="i" loop="$res_id"}<ul><li>
<table border="0" width="100%" id="table2">
<tr>
<td width="20">
{thumb file="imagenes/$res_imagen[i]" width="20" height="20" link="false";}</td>
<td><a href="index.php?action=verartista&id={$res_id[i]}">
{$res_nombre[i]}</a></td>
</tr>
</table></li></ul>
{/section}</td>
</tr>
</table>
************************************************************
now this is my main file form I called buscame.tpl
this is the form i just include this file in every tpl i wanted to show my autosuggest list as soon as you type it will show suggestions.
************************************************************


<head>
<link rel="stylesheet" href="templates/css/style2.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script type="text/javascript" src="templates/css/jquery-1.2.1.pack.js"></script>
{literal}
<script type="text/javascript">

function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("buscara.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup

function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
{/literal}

</head>

<body>


<div>
<form action="index.php?action=procesar_busqueda" method="post">
<div>
Buscar Artista/Banda:
<br /><input type="submit" value="Buscar!" style="height:20px;">
<input type="text" name="buscar" size="30" AUTOCOMPLETE=OFF value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>

<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="templates/imagenes/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
&nbsp;
</div>
</div>
</form>
</div>

</body>
</html>
**********************************************************
I just include this file in evry page i wanted and is working beautiful
i can belive..
ops i almos forgot this is my style2.css file i changed i few things in it
from the original.
*******************************************************
.suggestionsBox {
position: absolute;
background-color: #212427;
left: 450;
margin: 5px 0px 0px 0px;
width: 300px;

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList li {

margin: 0px 0px 0px 0px;
padding: 0px;
cursor: pointer;
}

.suggestionList li:hover {
background-color: #659CD8;
}

ul{
list-style-type: none;
padding: 0;
margin: 0;
}

.tooltip {
position:relative;
}
.tooltip span {
position:absolute;
left:-999em;
}
.tooltip:hover span, .tooltip:focus span {
position: absolute;
background-color: #212427;
left: 90;
margin: 5px 0px 0px 0px;
width: 400px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;


}

****************************************************
there is one last file you need to download jquery-1.2.1.pack.js
from "Nodstrumdotcom
I hope everyone can undertand it. ok cheers, email or pm me for the for any problems or help
Back to top
View user's profile Send private message
phper
Smarty n00b


Joined: 03 Dec 2009
Posts: 2

PostPosted: Wed Dec 09, 2009 1:44 am    Post subject: Reply with quote

Do you have a sample of this code running?
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> General All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP