Evidenziare in grassetto a seconda della parola chiave

08-02-2012, 20.11.29

Salve a tutti,
vorrei sapere come fare per evidenziare in grassetto una parola se quella parola è presente in un link.
Vi faccio capire meglio, su Google quando cerchi qualcosa per esempio, io digito la parola facebook lui mi trova tutti i risultati e se la parola chiave (ovvero facebook) è presente in qualche risultato me lo mette in grassetto sia nel titolo, che nella descrizione del sito, che nel link.
Io vorrei fare la stessa identica cosa, visto che sto costruendo un motore di ricerca.
Dico subito che ho già provato nel css a fare:

Codice:

.title
{
color:#1122CC;
font-size:medium;
padding-bottom:5px;

e per evidenziare il grasetto

Codice:

.title b
{
color:#1122CC;
font-weight:bold;
font-size:medium;
padding-bottom:5px;

ma non funziona, anzi si incasina tutta la pagina, quindi presumo che ci voglia non solo il css ma anche una funzione di codice per fare ciò.
In questa pagina di testo c'è il codice che uso per il motore di ricerca (con le api di bing) eccolo: http://talkpluginorange.altervista.org/codice.txt
invece, se volete provarlo, ecco il link: http://talkpluginorange.altervista.org/web.html
Grazie mille.

**sevenjeak** · 08-02-2012, 21.10.49

Si, ti occorre anche il php, e le espressioni regolari.

Praticamente e quello che io faccio nel mio motore di ricerca, anche se io invece di metterli in grassetto li evidenzio.

Per farti un'esempio, dovresti mettere, prima di stampare il titolo ( ovviamente vale anche per la descrizione ), nei tuoi risultati di ricerca, questa istruzione php:

Codice PHP:


$titolo = preg_replace("/($key)/i", "<b>$1</b>", $titolo);

Praticamente, ogni volta che nella stringa in $titolo, trova la stringa in $key lo sostituisce con la stessa stringa trovata, con l'aggiunta dei tag <b>, che io ho definito.

P.S.: Ti consiglio di vedere le espressioni regolari, se non li conosci, oltre ad altre cose che ti ho detto.

08-02-2012, 21.22.42

Si ma così dovrei riscrivere il codice da capo?
Poi non so come fare, perchè il codice come avete visto che uso è javascript.
Ora riporto il codice qui, il blocco di codice php che mi hai scritto sopra me lo potresti inserire correttamente tu?

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>Bing Instant with Jquery 9lessons</title> 

<meta content='Bing Instant Search with Jquery' name='description'/> 

<meta content='Bing Instant, 9lessons, PHP' name='keywords'/> 

<script type="text/javascript" src="http://ajax.googleapis.com/

ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

 

<script type="text/javascript"> 

$(document).ready(function()

{

$(".search_input").focus();

$(".search_input").keyup(function() 

{

 

var search_input = $(this).val();

var keyword= encodeURIComponent(search_input);

 

 

var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web'; 



 

$.ajax({

type: "GET",

url: yt_url,

dataType:"jsonp",

success: function(response)

{



$("#result").html('');

if(response.SearchResponse.Web.Results.length)

{

 

 

 

$.each(response.SearchResponse.Web.Results, function(i,data)

{



 

var title=data.Title;

var dis=data.Description;

var url=data.Url;



var final="<div class='webresult'><div class='title'><a href='"+url+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";



 

$("#result").append(final);

 

});

 

 

}

else

{

$("#result").html("<div id='no'>No results</div>");

}

}

 

});

 

 

 

 

 

 

 

});

 

 

});

 

</script> 

<style> 

body {



color:#000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;



}

#container

{

margin:0 auto;

width:700px;



}



 

.search_input

{

 

border:2px solid #333;

font-size:20px;

padding:5px;

width:350px;

font-family:'Georgia', Times New Roman, Times, serif;

-moz-border-radius:5px;-webkit-border-radius:5px;

 

 

}

#input_box

{

text-align:left;

width:640px;

}

#result

{

text-align:left;



}

#no

{

padding:30px;

font-size:24px;

color:#fff;

 

}

 

.title

{

color:#1122CC;



font-size:medium;

padding-bottom:5px;





}

.title a

{

color:#1122CC;

text-decoration:underline;

}

.desc

{

color:#333;

padding-bottom:5px;





 

}



.url

{

 color:#006600;

}

.webresult

{

margin-top:10px;

padding-bottom:10px;

padding-left:5px;

}





</style> 

</head> 

 

<body> 



<div id="container"> 

 

<div id="input_box"> 



<img src="bing4.png" /><br/> 

<input type="text" class='search_input'  />&nbsp; Tutorial link <a href="">click here</a><br/> <br/> 

 

</div> 



<div id="result"> 



</div> 





</div> 



</body> 
</html>

Grazie mille e scusate per il disturbo.

**EuroSalute** · 09-02-2012, 00.05.57

ho dato una occhiata allo script jquery, si può fare utilizzando la funzione replace() in questo modo:

aggiungi: window.location.hash=keyword;

Codice HTML:

............ecc.................
var keyword= encodeURIComponent(search_input); 

var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web'; 

//aggiungi:
window.location.hash=keyword;
//end

$.ajax({

type: "GET",

url: yt_u..............ecc....

modifichi:

Codice HTML:

var titlee=data.Title;

var diss=data.Description;

var urll=data.Url;


var keyy=keyword;
var keyx="<b>"+keyword+"</b>";

var title=titlee.replace(keyy, keyx);
var dis=diss.replace(keyy, keyx);
var url=urll.replace(keyy, keyx);

e vedrai che funziona....

09-02-2012, 00.25.01

Grazie mille!!!
Sei un genio!!! :)

EDIT:
Grazie mille,
però noto un piccolo difetto quando clicco nel link.
Se per esempio io digito "Google" con la lettera inizale maiuscola, quando clicco sul link mi reindirizza a google.it. Se invece digito "google" minuscolo, invece di reindirizzarmi sempre a google, si "crea" un link di questo tipo: http://www.%3Cb%3Egoogle%3C/b%3E.it/
e, naturalmente quando clicco, mi appare una pagina di errore.
Cosa c'è che non va?
Ecco il codice completo:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Bing Instant with Jquery 9lessons</title> 
<meta content='Bing Instant Search with Jquery' name='description'/> 
<meta content='Bing Instant, 9lessons, PHP' name='keywords'/> 
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<script type="text/javascript"> 
$(document).ready(function()
{
$(".search_input").focus();
$(".search_input").keyup(function() 
{
 
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
 
 
var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web'; 

//aggiungi:
window.location.hash=keyword;
//end
 
$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{

$("#result").html('');
if(response.SearchResponse.Web.Results.length)
{
 
 
 
$.each(response.SearchResponse.Web.Results, function(i,data)
{

 
var titlee=data.Title;

var diss=data.Description;

var urll=data.Url;


var keyy=keyword;
var keyx="<b>"+keyword+"</b>";

var title=titlee.replace(keyy, keyx);
var dis=diss.replace(keyy, keyx);
var url=urll.replace(keyy, keyx);

var final="<div class='webresult'><div class='title'><a href='"+url+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";

 
$("#result").append(final);
 
});
 
 
}
else
{
$("#result").html("<div id='no'>No results</div>");
}
}
 
});
 
 
 
 
 
 
 
});
 
 
});
 
</script> 
<style> 
body {

color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

}
#container
{
margin:0 auto;
width:700px;

}

 
.search_input
{
 
border:2px solid #333;
font-size:20px;
padding:5px;
width:350px;
font-family:'Georgia', Times New Roman, Times, serif;
-moz-border-radius:5px;-webkit-border-radius:5px;
 
 
}
#input_box
{
text-align:left;
width:640px;
}
#result
{
text-align:left;

}
#no
{
padding:30px;
font-size:24px;
color:#fff;
 
}
 
.title
{
color:#1122CC;
font-size: 16px; 
font-weight: normal; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
margin-left: 0px; 
overflow-x: hidden; 
overflow-y: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
font-family: arial, sans-serif;

}
.title a
{
color:#1122CC;
font-size: 16px; 
font-weight: normal; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
margin-left: 0px; 
overflow-x: hidden; 
overflow-y: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
font-family: arial, sans-serif;
text-decoration:underline;
}

.title b
{
color:#1122CC;
font-size: 16px; 
font-weight: bold; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
margin-left: 0px; 
overflow-x: hidden; 
overflow-y: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
font-family: arial, sans-serif;
text-decoration:underline;
}

.desc
{
font-size: 14px; 
font-weight: normal; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
margin-top: 3px; 
margin-right: 0px; 
margin-bottom: 0px; 
margin-left: 0px; 
overflow-x: hidden; 
overflow-y: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
font-family: arial, sans-serif;

}

.url
{
 color:#006600;
 margin-top:3px;
}
.webresult
{
margin-top:10px;
padding-bottom:10px;
padding-left:5px;
}


</style> 
</head> 
 
<body> 

<div id="container"> 
 
<div id="input_box"> 

<img src="bing4.png" /><br/> 
<input type="text" class='search_input' name="key" />&nbsp; Tutorial link <a href="">click here</a><br/> <br/> 
 
</div> 

<div id="result"> 

</div> 


</div> 

</body> 
</html>

Cosa c'è che lo rende difettoso quando digito un termine in minuscolo?
Spero possiate risolvere questo problema.
Grazie mille a tutti.

**EuroSalute** · 09-02-2012, 11.29.00

sostituisci nella linea di codice di var final:

Codice HTML:

<a href='"+url+"'>"+title+"</a>

con :

Codice HTML:

<a href='"+urll+"'>"+title+"</a>

in pratica sostituisci url con urll

non serve e non ci deve essere l'href in grassetto.....

09-02-2012, 12.07.08

Grazie mille!
Siete dei grandi!
Visto che ci sono, ci tenevo a domandare ancora una cosa se è possibile, se no pazienza, mi avete già aiutato tantissimo!
Allora, se risolverei anche questo avrei praticamente quasi finito il motore di ricerca!
Ho trovato tempo fa uno script per la ricerca immagini, sempre con le api di live search.
Il punto è che questo script di ricerca immagini ha molte pagine di risultati, come google, bing, yahoo ecc... ovvero, cliccando su ">>" va avanti con le immagini (cioè va avanti con le pagine) e cliccando su "<<" ritorna indietro.
Ecco, ci ho provato in tutti i modi a riuscire a fare questo anche con la ricerca web, ma nulla (ho provato con la funziona "offset".
Come dovrei fare per fare questo anche per la ricerca web?
Ecco il codice della ricerca immagini (con molte pagine di risultati). Eccolo:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>Bing Instant with Jquery 9lessons</title> 

<meta content='Bing Instant Search with Jquery' name='description'/> 

<meta content='Bing Instant, 9lessons, PHP' name='keywords'/> 

<script type="text/javascript" src="http://ajax.googleapis.com/

ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

 

<script type="text/javascript"> 

var appId = '3B9C201E46EC29FA906BEF65B7A97C5B3944BA92';

var offset = 0; 

var perPage  = 9;

$(document).ready(function(){

  $(".search_input").focus();

  $(".search_input").keyup(function(){

      search(offset);

  });





$('#offset_prev').click(function() {

    offset  = offset - perPage;

    search(offset);

  });



$('#offset_next').click(function() {

    offset  = offset + perPage;

    search(offset);

  });



  function search(offset){



    var search_input = $(".search_input").val();

    

    var keyword= encodeURIComponent(search_input);

 

    var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid='+appId+'&query='+keyword+'&sources=image&Image.Count='+perPage+'&Image.Offset='+offset; 



 

    $.ajax({

      type: "GET",

      url: yt_url,

      dataType:"jsonp",

      success: function(response){

	$("#result").html('');

	if(response.SearchResponse.Image.Results.length){

	  $.each(response.SearchResponse.Image.Results, function(i,data)

	    {	

	      var url=data.MediaUrl;

	      var thumb=data.Thumbnail.Url;

	      var dimw=data.Width;

	      var dimh=data.Height;



	      var final="<div class='webresult'><div class='title'><a href='"+url+"'><img src='"+thumb+"' /></a></div><div class='desc'>"+dimw+"X"+dimh+"</div></div>";

	      $("#result").append(final);

      

	    });

	}else{

	    $("#result").html("<div id='no'>No results</div>");

	}

      }

    

    });



  }

    



});







 

</script> 

<style> 

body {



color:#000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;



}

#container

{

margin:0 auto;

width:700px;



}



 

.search_input

{

 

border:2px solid #333;

font-size:20px;

padding:5px;

width:350px;

font-family:'Georgia', Times New Roman, Times, serif;

-moz-border-radius:5px;-webkit-border-radius:5px;

 

 

}

#input_box

{

text-align:left;

width:640px;

}

#result

{

text-align:left;



}

#no

{

padding:30px;

font-size:24px;

color:#fff;

 

}

 

.title

{

color:#006699;



font-size:16px;

padding-bottom:5px;





}

.title a

{

color:#cc0000;

text-decoration:none;

}

.desc

{

color:#333;

padding-bottom:5px;





 

}



.url

{

 color:#006600;

}

.webresult

{

margin-top:10px;

padding-bottom:10px;

padding-left:5px;

border-bottom:1px dashed #dedede;

}







#offset_prev,#offset_next{

  cursor:pointer;

}





</style> 

</head> 

 

<body> 



<div id="container"> 

 

<div id="input_box"> 



<img src="bing4.png" /><br/> 

<input type="text" class='search_input' />

 <a id="offset_prev"><<</a>

 <a id="offset_next">>></a>

</div> 



<div id="result"> 



</div> 





</div> 



</body> 

</html>

Grazie mille!

**EuroSalute** · 09-02-2012, 13.40.15

ok....ci sono riuscito!

a questa pagina trovi il codice modificato:
http://eurosalute.altervista.org/tes...eb_search.html

per il grassetto ho fatto ancora una ulteriore modifica:

Codice HTML:

var array_dis=diss.split(" ");
var dis="";
for(i = 0; i < array_dis.length; i++){

var dis=dis+" "+array_dis[i].replace(keyy, keyx);

}

ma trovi il codice completo alla pagina di cui sopra....

09-02-2012, 15.10.49

Ehi, ma tu sei un grande! :)
Veramente, bravissimo.
Solo una cosa, forse esagererò io ma voglio chiedere solo per pura curiosità, nient'altro.
Se tipo io digito YouTube, i risultati escono tutti ;) solo che un pò stranamente per esempio appunto se i digito "YouTube" il primo risultato che mi appare è la pagina facebook di YouTube, invece che il sito Youtube. Un altro esempio, se io digito "Google", la prima cosa che mi appare è Google Pack, invece che Google.it
E' una cosa locale o dipende da qualche tuo codice modificato?
Grazie mille!

**EuroSalute** · 09-02-2012, 15.45.37

no, non dipende sicuramente dalle mie modifiche....

comunque ho controllato dalla pagina di prova:
eurosalute.altervista.org/test-prove/web_search.html

sia per google sia per youtube i risultati primi sono le loro pagine iniziali, correttamente....

prova a fare il refresh della pagina senza l'ancora -->#keyword

per il grassetto funziona con la ricerca di singole keyword, se si inserisce più parole non vengono evidenziate e allora bisogna ancora modificare...

09-02-2012, 15.56.53

Ho provato a togliere la Key: +key+
quella parte lì, perchè ho pensato che lui legge le keyword, comunque non cambia tanto...
ecco la pagina in questione: http://talkpluginorange.altervista.org/prova1.php
ed il codice è il seguente, forse dipende dal mio codice... non saprei, comunque eccolo:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>Bing Instant with Jquery 9lessons</title> 

<meta content='Bing Instant Search with Jquery' name='description'/> 

<meta content='Bing Instant, 9lessons, PHP' name='keywords'/> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<!--<script src='http://www.jquery.info/scripts/SearchHighlight.js'></script>-->

 

<script type="text/javascript"> 

var offset = 0; 

var perPage  = 9;


$(document).ready(function()

{

$(".search_input").focus();

$(".search_input").keyup(function(){

search(offset);

  });
	
	
$('#offset_prev').click(function() {

    offset  = offset - perPage;

    search(offset);

  });



$('#offset_next').click(function() {

    offset  = offset + perPage;

    search(offset);

  });
	
	
	
function search(offset){
var search_input = $(".search_input").val();
//var search_input = $(this).val();

var keyword= encodeURIComponent(search_input); 

var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web&Web.Count='+perPage+'&Web.Offset='+offset; 

window.location.hash=keyword;
 

$.ajax({

type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)

{

$("#result").html('');

if(response.SearchResponse.Web.Results.length)

{ 

$.each(response.SearchResponse.Web.Results, function(i,data)

{ 

var titlee=data.Title;

var diss=data.Description;

var urll=data.Url;



//var key=keyword;
var keyy=keyword;
var keyx="<b>"+keyword+"</b>";

var array_dis=diss.split(" ");
var dis="";
for(i = 0; i < array_dis.length; i++){

var dis=dis+" "+array_dis[i].replace(keyy, keyx);

}

var title=titlee.replace(keyy, keyx);
//var dis=diss.replace(keyy, keyx);
var url=urll.replace(keyy, keyx);

var final="<div class='webresult'><div class='title'><a href='"+urll+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";

$("#result").append(final);

}); 

}//if(response.SearchResponse.Web.Results.length)
else
{
$("#result").html("<div id='no'>No results</div>");
}

}//function (response)

}); //$.ajax({

}//function search(offset){

//}); 

});

 

</script> 

<style> 




body {



color:#000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;



}

#container

{

margin:0 auto;

width:700px;



}



 

.search_input

{

 

border:2px solid #333;

font-size:20px;

padding:5px;

width:350px;

font-family:'Georgia', Times New Roman, Times, serif;

-moz-border-radius:5px;-webkit-border-radius:5px;

 

 

}

#input_box

{

text-align:left;

width:640px;

}

#result

{

text-align:left;



}

#no

{

padding:30px;

font-size:24px;

color:#fff;

 

}

 

.title

{

color:#1122CC;



font-size:medium;

padding-bottom:5px;





}

.title a

{

color:#1122CC;

text-decoration:underline;

}

.desc

{

color:#333;

padding-bottom:5px;





 

}



.url

{

 color:#006600;

}

.webresult

{

margin-top:10px;

padding-bottom:10px;

padding-left:5px;

}


#offset_prev,#offset_next{

  cursor:pointer;

}



</style>

<div id="container"> 

 

<div id="input_box"> 



<!--<img src="bing4.png" /><br/>--> 

<input type="text" class='search_input'  />&nbsp; 

<a id="offset_prev"><<</a>

 <a id="offset_next">>></a>


&nbsp; Tutorial link <a href="">click here</a><br/> <br/> 

 

</div> 



<div id="result"> 



</div> 





</div> 



</body> 

</html>

Poi ecco, mi hai detto che se tu digiti una frase non lo mette in grasseto, diciamo che "andrebbe" bene lo stesso... ma se è possibile mettere in grassetto, perchè no?
Tu ci riesci?
Grazie mille e scusa se ti sto tormentando di richieste, ma lo faccio perchè sei sicuramente un grande professionista ;)

P.S ora nella pagina del tuo sito i risultati escono in ordine, prima invece anche nel tuo sito uscivano in disordine, hai cambiato il codice?

**EuroSalute** · 09-02-2012, 16.03.55

non centra il codice....

e che probabilmente eri ad una pagina successiva......

basta che fai il refresh della pagina per azzerare l'offset....

oppure premi ctrl+f5

adesso vedo per la modifica......

09-02-2012, 16.05.42

Infatti! ;)
Ora va!
Veramente, grande, sei un mito!
Ok, aspetto per la modifica.
Grazie ancora

EDIT:
Ah, ancora una cosa, sempre solo per curiosità
Noto che le pagine non sono abbastanza, per esempio se io digito facebook ho contato le pagine di risultati e sono solo 25, quando chissà quante me ne aspettavo.
Ho pensato, può dipendere dalle api di live search? che è un motore di ricerca abbastanza vecchiotto.
Dici che se cambio la riga:

Codice:

var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web&Web.Count='+perPage+'&Web.Offset='+offset;

in
al posto api.search.live.net in bing ecc... dici che può dipendere da questo, o non funzionerebbe?

**EuroSalute** · 09-02-2012, 16.21.43

devi provare , adesso così non ti so dire....

09-02-2012, 16.32.10

Ho provato, ma non sembra dipendere da questo. Va bè, sempre meglio 35 pagine che 8 pagine, come gli script di google...
Aspetto le modifiche per le frasi in grassetto, grazie mille!

**EuroSalute** · 09-02-2012, 17.45.42

ho finito con la modifica, modifica che non conta però di simboli come - o la virgola,

tiene conto dello spazio tra una parola e l'altra....

per gli url tiene conto dello /

se così ti può andare bene, se no bisogna apportare modifiche più complesse....e adesso non ho tempo.....

codice modifica:

Codice HTML:

var key=keyword;
var array_key=key.split("%20");



var array_dis=diss.split(" ");
var dis="";

for(i = 0; i < array_dis.length; i++){

var word_y=word_n="";

for(k = 0; k < array_key.length; k++){
if (array_dis[i].match(array_key[k])) word_y=array_dis[i].replace(array_key[k], "<b>"+array_key[k]+"</b>");
else word_n=array_dis[i];
}
if (word_y) dis=dis+" "+word_y;
else dis=dis+" "+word_n;
}


var array_title=titlee.split(" ");
var title="";

for(i = 0; i < array_title.length; i++){

var word_y=word_n="";

for(k = 0; k < array_key.length; k++){
if (array_title[i].match(array_key[k])) word_y=array_title[i].replace(array_key[k], "<b>"+array_key[k]+"</b>");
else word_n=array_title[i];
}
if (word_y) title=title+" "+word_y;
else title=title+" "+word_n;
}


var array_url=urll.split("/");
var url="";

for(i = 0; i < array_url.length; i++){

var word_y=word_n="";

for(k = 0; k < array_key.length; k++){
if (array_url[i].match(array_key[k])) word_y=array_url[i].replace(array_key[k], "<b>"+array_key[k]+"</b>");
else word_n=array_url[i];
}
if (word_y) url=url+"/"+word_y;
else url=url+"/"+word_n;
}

url=url.substring(1, url.lastIndexOf("/")+1);


var final="<div class='webresult'>Key="+key+"<div class='title'><a href='"+urll+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";

puoi vedere il codice completo alla pagina di prova

per es. prova a digitare:
Google motore di ricerca google

09-02-2012, 18.41.55

Grazie ancora,
ora funziona, comunque tranquillo, così mi basta e avanza. ;)
L'ultimissima cosa che ti chiedo, ma questa volta davvero l'ultima. :)
Se io tipo volessi fare la ricerca news, o blog o qualsiasi altra cosa...
basta semplicemente cambiare dappertutto id tipo dove c'è web scrivo news o non basta questo?
Grazie ancora per la pazienza.

**EuroSalute** · 09-02-2012, 21.26.17

per tua referenza e per altri interessati, qui c'è una guida ben dettagliata che spiega come ottenere AppId, type source, e tutti gli attributi che si possono utilizzare...

http://www.codeproject.com/Articles/...-API-using-NET

cambiando a news, ovviamente sarà un altra AppId, e non solo ma varia anche il jquery (sostituendo le varie parti con news e News) e i dati che si ottengono alla risposta....del tipo data.BreakingNews

bisogna in ogni caso seguire la documentazione (o cercare sulla rete se c'è già qualcosa di fatto....)

09-02-2012, 21.45.55

Allora, ora ho capito abbastanza.
Ho copiato il codice del web e modificato tutto in news e News ed inoltre ho cambiato API KEY acquisita su bing Devolopers.
Il problema (che già immaginavo) è che non funziona... perchè non so dove devo mettere la funzione "NewsResult.BreakingNews"
Dove la devo cambiare?
Ecco il codice (sbagliato)

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>Bing Instant with Jquery 9lessons</title> 

<meta content='Bing Instant Search with Jquery' name='description'/> 

<meta content='Bing Instant, 9lessons, PHP' name='keywords'/> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<!--<script src='http://www.jquery.info/scripts/SearchHighlight.js'></script>-->

 

<script type="text/javascript"> 

var offset = 0; 

var perPage  = 10;


$(document).ready(function()

{

$(".search_input").focus();

$(".search_input").keyup(function(){

search(offset);

  });
	
	
$('#offset_prev').click(function() {

    offset  = offset - perPage;

    search(offset);

  });



$('#offset_next').click(function() {

    offset  = offset + perPage;

    search(offset);

  });
	
	
	
function search(offset){
var search_input = $(".search_input").val();
//var search_input = $(this).val();

var keyword= encodeURIComponent(search_input); 

var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=3B9C201E46EC29FA906BEF65B7A97C5B619F0953&query='+keyword+'&sources=news&News.Count='+perPage+'&News.Offset='+offset; 

window.location.hash=keyword;
 

$.ajax({

type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)

{

$("#result").html('');

if(response.SearchResponse.News.Results.length)

{ 

$.each(response.SearchResponse.News.Results, function(i,data)

{ 

var titlee=data.Title;

var diss=data.Description;

var urll=data.Url;



//var key=keyword;
var key=keyword;
var array_key=key.split("%20");



var array_dis=diss.split(" ");
var dis="";

for(i = 0; i < array_dis.length; i++){

var word_y=word_n="";

for(k = 0; k < array_key.length; k++){
if (array_dis[i].match(array_key[k])) word_y=array_dis[i].replace(array_key[k], "<b>"+array_key[k]+"</b>");
else word_n=array_dis[i];
}
if (word_y) dis=dis+" "+word_y;
else dis=dis+" "+word_n;
}


var array_title=titlee.split(" ");
var title="";

for(i = 0; i < array_title.length; i++){

var word_y=word_n="";

for(k = 0; k < array_key.length; k++){
if (array_title[i].match(array_key[k])) word_y=array_title[i].replace(array_key[k], "<b>"+array_key[k]+"</b>");
else word_n=array_title[i];
}
if (word_y) title=title+" "+word_y;
else title=title+" "+word_n;
}


var array_url=urll.split("/");
var url="";

for(i = 0; i < array_url.length; i++){

var word_y=word_n="";

for(k = 0; k < array_key.length; k++){
if (array_url[i].match(array_key[k])) word_y=array_url[i].replace(array_key[k], "<b>"+array_key[k]+"</b>");
else word_n=array_url[i];
}
if (word_y) url=url+"/"+word_y;
else url=url+"/"+word_n;
}

url=url.substring(1, url.lastIndexOf("/")+1);


var final="<div class='webresult'><div class='title'><a href='"+urll+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";

$("#result").append(final);

}); 

}//if(response.SearchResponse.News.Results.length)
else
{
$("#result").html("<div id='no'>No results</div>");
}

}//function (response)

}); //$.ajax({

}//function search(offset){

//}); 

});

 

</script> 

<style> 




body {



color:#000;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;



}

#container

{

margin:0 auto;

width:700px;



}



 

.search_input

{

 

border:2px solid #333;

font-size:20px;

padding:5px;

width:350px;

font-family:'Georgia', Times New Roman, Times, serif;

-moz-border-radius:5px;-webkit-border-radius:5px;

 

 

}

#input_box

{

text-align:left;

width:640px;

}

#result

{

text-align:left;



}

#no

{

padding:30px;

font-size:24px;

color:#fff;

 

}

 

.title

{

color:#1122CC;

font-family:arial, sans-serif;

font-size:medium;

padding-bottom:5px;


}

.title a

{

color:#1122CC;

text-decoration:underline;

font-family:arial, sans-serif;

}

.desc

{

color:#333;

padding-bottom:5px;

font-size:small;

font-family: arial, sans-serif; 

line-height: 16px;



 

}



.url

{

 color:#009A33;

 font-size:small;
 
 font-family: arial, sans-serif; 

 line-height: 15px;

}

.webresult

{

margin-top:10px;

padding-bottom:10px;

padding-left:5px;

}


#offset_prev,#offset_next{

  cursor:pointer;

}



</style>

<div id="container"> 

 

<div id="input_box"> 



<!--<img src="bing4.png" /><br/>--> 

<input type="text" class='search_input'  />&nbsp; 

<a id="offset_prev"><<</a>

 <a id="offset_next">>></a>


&nbsp; Tutorial link <a href="">click here</a><br/> <br/> 

 

</div> 



<div id="result"> 



</div> 





</div> 



</body> 

</html>

Grazie mille!

P.S Se ora riuscirei a capire come configurare il tutto, forse dopo me la riuscirei a cavare con tutto il resto da solo ;)

**EuroSalute** · 09-02-2012, 22.52.31

funziona a questa pagina...per prendere il codice....
eurosalute.altervista.org/test-prove/news.html

l'output che ho inserito:

data.Title;

data.Source;

data.Url;

data.Date;

data.Snippet;

non ho più fatto il grassetto per Date e Snippet, e devi fare lo stile per questi due ultimi....

modificalo a tuo piacere.....

09-02-2012, 23.10.15

Grazie mille! Ora me la cavo da solo
Visto che nella guida non ci sono l'ID della ricerca video,
tu per caso sai solo l'id della ricerca video?
per id intendo quelli che devo aggiungere oltre ad modificare tutto in video e Video, ma penso che io debba modificare anche tutto il css vero? Se avessi l'id me la caverei da solo a questo punto ;)
Spero non ti disturbi troppo ;)

**EuroSalute** · 09-02-2012, 23.16.32

prova a fare riferimento a questa libreria di codici di esempio:
http://msdn.microsoft.com/en-us/library/dd251066.aspx

ora devo proprio andare....

ciao

09-02-2012, 23.21.28

Grazie mille ancora.

EDIT:
Volevo sapere ancora una cosa se è possibile, ma se è troppo difficile lascio stare.
Tipo su Google (non sempre) ma certe volte quando digiti una parola per esempio "Italia" ti fa uscire in risultati web anche "Immagini correlate per Italia" e esce qualche immagine...
Potrei fare anche io una roba simile? Non dico per forza tutto in automatico ma magari anche solo qualche parola importante tipo:
If ($parola == 'Italia')
echo 'Immagini correllate per Italia'
<img src="italia.png" /><img src="italia-roma.png" /> (ora sicuramente avrò sbagliato a mettere il php ma era solo per farvi capire) e in pratica sotto queste 4 - 5 foto i risultati web... (e chi clicca su queste 5 foto viene reindrizzato a tutte le foto per "Italia" nella ricerca immagini...)
Ripeto se è un'impresa troppo grossa lascio stare ma ci tenevo a chiedere visto che lo ottimizzerebbe ancora di più il mio motore di ricerca.
Grazie ancora!

**EuroSalute** · 10-02-2012, 16.11.48

non ho ben capito quello che vorresti fare?

è correlato alla ricerca per le immagini?

comunque ho inserito anche la visualizzazione della pagina, importante per sapere dove ci troviamo durante la ricerca nelle pagine....con un alert quando l'offset scende a valori negativi...

il codice qui:
http://eurosalute.altervista.org/test-prove/news.html

10-02-2012, 16.36.59

Inazitutto ti ringrazio per il tuo lavoro.
Allora, quello che vorrei fare è proprio questo: se io su Google cerco "search button" prima dei risultati web escono "Images for search button" e dopo quelle 5 immagini di esposizione, sotto appaiono i risultati web, per farti capire guarda questo esempio: https://www.google.com/search?q=ital...w=1024&bih=537
Per quanto riguarda le pagine, veramente non volevo disturbarti, solo che non sarebbe possibile fare la cosi detta "pagination"? Ovvero come google, bing e yahoo, invece di << e >> fare 1 2 3 4 5 e via con le pagine e se uno clicca sul numero viene reindirizzato a quel numero di pagina?
Nella pagina che mi hai mandato ci sei arrivato molto vicino e per questo mi congratulo nuovamente con te, ma sempre se non ti faccio perdere troppo tempo sarebbe possibile fare anche questa funzione (ovvero della "pagination", così detta in inglese)?
Per il css non preoccuparti, ci penso io ;)
Grazie mille sei un grande! ;)

**EuroSalute** · 10-02-2012, 18.13.40

intendevo dire, per le immagini intendi sfruttare il motore bing come per il web, oppure google?

per la pagination, bisogna conoscere primo i risultati totali della ricerca...

comunque fare tutte queste cose non sarà così semplice e richiederà parecchio tempo....

10-02-2012, 18.35.34

Allora. Ripeto, non voglio far uscire sempre le immagini e non voglio nemmeno che escano in automatico. Ti faccio capire meglio, se un utente nella ricerca web digiterà la parola che ne so, Italia, voglio che sopra i risultati web escano 5 foto su Italia con sopra scritto "Immagini per Italia", un altro esempio se un utente digiterà la parola che ne so, Social Network... non voglio che escono le foto corellate alla sua ricerca web. Quindi "le foto" le posso aggiungere anche da solo, il punto un pò difficile è farle "visualizzare" quando un utente digita quella parola. Voglio che escono le immagini corellate solo in certi casi, non ogni volta, anche perchè la ricerca è web ;)
Per quanto riguarda la pagination, non pensavo si dovesse sapere il numero di risultati. Ma c'è un modo per scoprirlo oppure si può fare anche non conoscendo il numero di risultati?
Grazie mille

**EuroSalute** · 10-02-2012, 19.15.49

se guardi adesso qui:
http://eurosalute.altervista.org/test-prove/news.html

ho inserito doppia richiesta json e funziona anche per le immagini....
si può sempre stabilire se farle visualizzare o meno.....in base al tipo di ricerca

bisogna comunque configurare bene il tutto con l'allineamento delle immagini , css, ecc....

ho anche inserito i risultati totali......con in questo caso:
response.SearchResponse.News.Total

10-02-2012, 19.30.09

Grazie mille!
Penso che a questo punto sia una cavolata fare questi piccoli due perfezionamenti
la prima quella di non mostrare le immagini sempre, solo se una persone digita la parola da me scelta e sopra le immagini mettere la scritta "Immagini corellate"
la seconda è possibile visualizzare le immagini in una dimensione più piccola?
Quella dei risultati totali è ottima, mi serviva proprio!
Mi stupisci sempre più, grande!

**EuroSalute** · 10-02-2012, 21.38.23

sempre alla pagina , puoi vedere le modifiche apportate al codice...

in questa variabile ho messo alcune parole per le immagini:
var keyword_image='casa/mutui/alberghi';

bisogna fare pagination......
ma non questa sera.....

se c'è qualcun altro che può dare una mano, magari.....

Discussione: Evidenziare in grassetto a seconda della parola chiave

LinkBack

Strumenti discussione

Display

Evidenziare in grassetto a seconda della parola chiave

Regole di scrittura