Live Search en nuestra web

La verdad no sabia que colocar en el titulo del post, estuve dando vueltas y bueno vamos a ver como nos va.

Últimamente ando con la fiebre de Windows Live Dev, hacer mención de lo que es no estaría mal, pero creo que ya todos sabes lo que es.

Para dar comienzo con lo que eh aprendido, vamos a integrar el buscador de Windows live Search en un sitio web, la idea es como buscar un texto en Windows Live Search. Por ahora claro, en otros post iremos complicando las cosas, ya que para comunicarse con Windows Live Search hay varias formas.

Primero creamos nuestro sitio web, luego crearemos un control de usuario al cual le agregamos el siguiente código.

   1: <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
   2:     <!-- Live Search -->
   3:     <meta name="Search.WLSearchBox" content="1.1, en-GB" />
   4:     <div id="WLSearchBoxDiv">
   5:     <table cellpadding="0" cellspacing="0" style="width: 180px">
   6:         <tr id="WLSearchBoxPlaceholder">
   7:             <td style="width: 100%; border: #DBD8D1 1px solid;">
   8:             <input id="WLSearchBoxInput" type="text" value="&#x4c;&#x6f;&#x61;&#x64;&#x69;&#x6e;&#x67;&#x2e;&#x2e;&#x2e;" 
   9:                     disabled="disabled" style="padding:0;
  10:                     background-image: url(https://search.live.com/s/siteowner/searchbox_background.png);
  11:                     background-position: right;background-repeat: no-repeat;height: 16px; width: 100%;
  12:                     border:none 0 Transparent" />
  13:             </td>
  14:             <td>
  15:                 <input id="WLSearchBoxButton" type="image" src="img/go_off.gif" 
  16:                 align="bottom" style="padding:0;border-style: none" />
  17:             </td>
  18:         </tr>
  19:     </table>
  20:     </div>
  21:     <!-- Live Search -->
  22: </asp:Panel>

Seguidamente anexamos el siguiente código JavaScript.

   1: <script type="text/javascript" charset="utf-8">
   1:  
   2:     var WLSearchBoxConfiguration =
   3:         {
   4:             "global": {
   5:                 "serverDNS": "search.live.com",
   6:                 "market": "en-GB"
   7:             },
   8:             "appearance": {
   9:                 "autoHideTopControl": false,
  10:                 "width": 600,
  11:                 "height": 400,
  12:                 "theme": "Yellow"
  13:             },
  14:             "scopes": [
  15:                 {
  16:                     "type": "web",
  17:                     "caption": "&#x57;&#x65;&#x62;",
  18:                     "searchParam": ""
  19:                 }
  20:             ]
  21:         }

</script>

Y.

   1: <script type="text/javascript" charset="utf-8" 
   2:   src="http://search.live.com/bootstrap.js?market=en-GB&ServId=SearchBox&ServId=SearchBoxWeb&Callback=WLSearchBoxScriptReady">
   1:  

</script>

Live

Con este código JavaScript le indicamos que el texto ah buscar lo haga en search.live.com y que además para hacer la búsqueda use la librería bootstrap.js que se encuentra en http://search.live.com/bootstrap.js

Ahora a probar.

Live1

Si queremos restringir la búsqueda a nuestro sitio en particular, debemos anexar en el JavaScript lo siguiente, para probar colocare la web de Geeks.Ms

   1: "searchParam": http://geeks.ms

Probamos otra vez.

Live2

Algunos links de interés.

Search Live Developer Center.

http://search.live.com/developer/default.aspx?FORM=PDPM

Dev Live

http://dev.live.com/

 

Romny Duarte.

Publicado por

Romny Duarte

Ingeniero de sistemas con experiencia en desarrollo web y móvil, geek, amante de la lectura y de la tecnología.

Un comentario en “Live Search en nuestra web”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *