Recherche en direct jQuery - filtrer le HTML

Question

J'ai une boîte de recherche en direct sur un site web, tout fonctionne et se présente bien, mais lorsque je tape quelque chose, puis que je fais défiler la liste pour faire une sélection, lorsque j'appuie sur Entrée, le HTML qui fait le formatage de la liste de recherche va dans la boîte de saisie comme un espace blanc.

Quelqu'un a-t-il une idée de la manière dont je peux filtrer ces espaces blancs ?

Boîte de recherche

<div id="search">

 <form id="search-form" name="search-form" method="post" action="/search/">

  <input type="text" id="searchbox" name="searchbox" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)" value="" autocomplete="off" onblur="fill();" />
  <input type="submit" id="submit_search" name="finder-go" value="&nbsp;" />

 </form>

</div>

livesearch.php

    <?php
if(isset($_GET['getCountriesByLetters']) && isset($_GET['letters'])){

  $res = mysql_query("SELECT * FROM `shows` WHERE `artist` LIKE '".$_GET['letters']."%' OR `show_title` LIKE '".$_GET['letters']."%' LIMIT 10");

  while($inf = mysql_fetch_array($res)){

   $selectz = mysql_query("SELECT * FROM `shows` WHERE `artist` = '".$inf['artist']."'");
   $resultz = mysql_fetch_array($selectz);

    echo trim('<a href="stackoverflow.com/shows/'.$inf['uri'].'/">'.$inf['artist'].'</a>|');
  }

  $res = mysql_query("SELECT * FROM `festivals` WHERE `name` LIKE '".$_GET['letters']."%' LIMIT 10");

  while($inf = mysql_fetch_array($res)){

   $selectz = mysql_query("SELECT * FROM `festivals` WHERE `name` = '".$inf['name']."'");
   $resultz = mysql_fetch_array($selectz);

    echo '<div class="search-res">
      <a href="stackoverflow.com/festival/'.$resultz['uri'].'/"><img src="/image.php?filename=admin/uploads/shows/'.$resultz['image'].'&width=60&heigh=34" class="search-image" /></a>
      <p class="search-name"><a href="stackoverflow.com/festival/'.$resultz['uri'].'/" onClick="fill(\''.$result->artist.'\');"> > '.$inf['name'].'</a></p>
     </div>|';
  }

 }
?>

live-search-ajax.js

    function sack(file) {

 this.xmlhttp = null;

 this.resetData = function() {

  this.method = "POST";

    this.queryStringSeparator = "?";

  this.argumentSeparator = "&";

  this.URLString = "";

  this.encodeURIString = true;

    this.execute = false;

    this.element = null;

  this.elementObj = null;

  this.requestFile = file;

  this.vars = new Object();

  this.responseStatus = new Array(2);

   };

 this.resetFunctions = function() {

    this.onLoading = function() { };

    this.onLoaded = function() { };

    this.onInteractive = function() { };

    this.onCompletion = function() { };

    this.onError = function() { };

  this.onFail = function() { };

 };

 this.reset = function() {

  this.resetFunctions();

  this.resetData();

 };

 this.createAJAX = function() {

  try {

   this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

  } catch (e1) {

   try {

    this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

   } catch (e2) {

    this.xmlhttp = null;

   }

  }

  if (! this.xmlhttp) {

   if (typeof XMLHttpRequest != "undefined") {

    this.xmlhttp = new XMLHttpRequest();

   } else {

    this.failed = true;

   }

  }

 };

 this.setVar = function(name, value){

  this.vars[name] = Array(value, false);

 };

 this.encVar = function(name, value, returnvars) {

  if (true == returnvars) {

   return Array(encodeURIComponent(name), encodeURIComponent(value));

  } else {

   this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);

  }

 }

 this.processURLString = function(string, encode) {

  encoded = encodeURIComponent(this.argumentSeparator);

  regexp = new RegExp(this.argumentSeparator + "|" + encoded);

  varArray = string.split(regexp);

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

   urlVars = varArray[i].split("=");

   if (true == encode){

    this.encVar(urlVars[0], urlVars[1]);

   } else {

    this.setVar(urlVars[0], urlVars[1]);

   }

  }

 }

 this.createURLString = function(urlstring) {

  if (this.encodeURIString && this.URLString.length) {

   this.processURLString(this.URLString, true);

  }

  if (urlstring) {

   if (this.URLString.length) {

    this.URLString += this.argumentSeparator + urlstring;

   } else {

    this.URLString = urlstring;

   }

  }

  // prevents caching of URLString

  this.setVar("rndval", new Date().getTime());

  urlstringtemp = new Array();

  for (key in this.vars) {

   if (false == this.vars[key][1] && true == this.encodeURIString) {

    encoded = this.encVar(key, this.vars[key][0], true);

    delete this.vars[key];

    this.vars[encoded[0]] = Array(encoded[1], true);

    key = encoded[0];

   }

   urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];

  }

  if (urlstring){

   this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);

  } else {

   this.URLString += urlstringtemp.join(this.argumentSeparator);

  }

 }

 this.runResponse = function() {

  eval(this.response);

 }

 this.runAJAX = function(urlstring) {

  if (this.failed) {

   this.onFail();

  } else {

   this.createURLString(urlstring);

   if (this.element) {

    this.elementObj = document.getElementById(this.element);

   }

   if (this.xmlhttp) {

    var self = this;

    if (this.method == "GET") {

     totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;

     this.xmlhttp.open(this.method, totalurlstring, true);

    } else {

     this.xmlhttp.open(this.method, this.requestFile, true);

     try {

      this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

     } catch (e) { }

    }

    this.xmlhttp.onreadystatechange = function() {

     switch (self.xmlhttp.readyState) {

      case 1:

       self.onLoading();

       break;

      case 2:

       self.onLoaded();

       break;

      case 3:

       self.onInteractive();

       break;

      case 4:

       self.response = self.xmlhttp.responseText;

       self.responseXML = self.xmlhttp.responseXML;

       self.responseStatus[0] = self.xmlhttp.status;

       self.responseStatus[1] = self.xmlhttp.statusText;

       if (self.execute) {

        self.runResponse();

       }

       if (self.elementObj) {

        elemNodeName = self.elementObj.nodeName;

        elemNodeName.toLowerCase();

        if (elemNodeName == "input"

        || elemNodeName == "select"

        || elemNodeName == "option"

        || elemNodeName == "textarea") {

         self.elementObj.value = self.response;

        } else {

         self.elementObj.innerHTML = self.response;

        }

       }

       if (self.responseStatus[0] == "200") {

        self.onCompletion();

       } else {

        self.onError();

       }

       self.URLString = "";

       break;

     }

    };

    this.xmlhttp.send(this.URLString);

   }

  }

 };

 this.reset();

 this.createAJAX();

}

**live-search.js**

     var ajaxBox_offsetX = 0;

 var ajaxBox_offsetY = 0;

 var ajax_list_externalFile = 'inc/lib/livesearch.php'; // Path to external file

 var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed.

 var ajax_list_objects = new Array();

 var ajax_list_cachedLists = new Array();

 var ajax_list_activeInput = false;

 var ajax_list_activeItem;

 var ajax_list_optionDivFirstItem = false;

 var ajax_list_currentLetters = new Array();

 var ajax_optionDiv = false;

 var ajax_optionDiv_iframe = false;

 var ajax_list_MSIE = false;

 if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('Opera')<0)ajax_list_MSIE=true;

 var currentListIndex = 0;

 function ajax_getTopPos(inputObj)

 {

   var returnValue = inputObj.offsetTop;

   while((inputObj = inputObj.offsetParent) != null){

    returnValue += inputObj.offsetTop;

   }

   return returnValue;

 }

 function ajax_list_cancelEvent()

 {

  return false;

 }

 function ajax_getLeftPos(inputObj)

 {

   var returnValue = inputObj.offsetLeft;

   while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;

   return returnValue;

 }

 function ajax_option_setValue(e,inputObj)

 {

  if(!inputObj)inputObj=this;

  var tmpValue = inputObj.innerHTML;

  if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent;

  if(!tmpValue)tmpValue = inputObj.innerHTML;

  ajax_list_activeInput.value = tmpValue;

  if(document.getElementById(ajax_list_activeInput.name + '_hidden'))document.getElementById(ajax_list_activeInput.name + '_hidden').value = inputObj.id;

    //var f1=setTimeout('ajax_list_activeInput.focus()',1);

    //var f2=setTimeout('ajax_list_activeInput.value = ajax_list_activeInput.value',1);

  ajax_options_hide();

 }

 function ajax_options_hide()

 {

  if(ajax_optionDiv)ajax_optionDiv.style.display='none';

  if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='none';

 }

 function ajax_options_rollOverActiveItem(item,fromKeyBoard)

 {

  if(ajax_list_activeItem)ajax_list_activeItem.className='optionDiv';

  item.className='optionDivSelected';

  ajax_list_activeItem = item;

  if(fromKeyBoard){

   if(ajax_list_activeItem.offsetTop>ajax_optionDiv.offsetHeight){

    ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2 ;

   }

   if(ajax_list_activeItem.offsetTop<ajax_optionDiv.scrollTop)

   {

    ajax_optionDiv.scrollTop = 0;

   }

  }

 }

 function ajax_option_list_buildList(letters,paramToExternalFile)

 {

  ajax_optionDiv.innerHTML = '';

  ajax_list_activeItem = false;

  if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length<=1){

   ajax_options_hide();

   return;

  }

  ajax_list_optionDivFirstItem = false;

  var optionsAdded = false;

  for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length;no++){

   if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].length==0)continue;

   optionsAdded = true;

   var div = document.createElement('DIV');

   var items = ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].split(/###/gi);

   if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length==1 && ajax_list_activeInput.value == items[0]){

    ajax_options_hide();

    return;

   }

   div.innerHTML = items[items.length-1];

   div.id = items[0];

   div.className='optionDiv';

   div.onmouseover = function(){ ajax_options_rollOverActiveItem(this,false) }

   div.onclick = ajax_option_setValue;

   if(!ajax_list_optionDivFirstItem)ajax_list_optionDivFirstItem = div;

   ajax_optionDiv.appendChild(div);

  }

  if(optionsAdded){

   ajax_optionDiv.style.display='block';

   if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='';

   ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);

  }

 }

 function ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,whichIndex)

 {

  if(whichIndex!=currentListIndex)return;

  var letters = inputObj.value;

  var content = ajax_list_objects[ajaxIndex].response;

  var elements = content.split('|');

  ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()] = elements;

  ajax_option_list_buildList(letters,paramToExternalFile);

 }

 function ajax_option_resize(inputObj)

 {

  ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';

  ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';

  if(ajax_optionDiv_iframe){

   ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;

   ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;

  }

 }

 function ajax_showOptions(inputObj,paramToExternalFile,e)

 {

  if(e.keyCode==13 || e.keyCode==9)return;

  if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;

  if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile] = new Array();

  ajax_list_currentLetters[inputObj.name] = inputObj.value;

  if(!ajax_optionDiv){

   ajax_optionDiv = document.createElement('DIV');

   ajax_optionDiv.id = 'ajax_listOfOptions';

   document.body.appendChild(ajax_optionDiv);

   if(ajax_list_MSIE){

    ajax_optionDiv_iframe = document.createElement('IFRAME');

    ajax_optionDiv_iframe.border='0';

    ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';

    ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';

    ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';

    document.body.appendChild(ajax_optionDiv_iframe);

   }

   var allInputs = document.getElementsByTagName('INPUT');

   for(var no=0;no<allInputs.length;no++){

    if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;

   }

   var allSelects = document.getElementsByTagName('SELECT');

   for(var no=0;no<allSelects.length;no++){

    allSelects[no].onfocus = ajax_options_hide;

   }

   var oldonkeydown=document.body.onkeydown;

   if(typeof oldonkeydown!='function'){

    document.body.onkeydown=ajax_option_keyNavigation;

   }else{

    document.body.onkeydown=function(){

     oldonkeydown();

    ajax_option_keyNavigation() ;}

   }

   var oldonresize=document.body.onresize;

   if(typeof oldonresize!='function'){

    document.body.onresize=function() {ajax_option_resize(inputObj); };

   }else{

    document.body.onresize=function(){oldonresize();

    ajax_option_resize(inputObj) ;}

   }

  }

  if(inputObj.value.length<minimumLettersBeforeLookup){

   ajax_options_hide();

   return;

  }

  ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';

  ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';

  if(ajax_optionDiv_iframe){

   ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;

   ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;

  }

  ajax_list_activeInput = inputObj;

  ajax_optionDiv.onselectstart =  ajax_list_cancelEvent;

  currentListIndex++;

  if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()]){

   ajax_option_list_buildList(inputObj.value,paramToExternalFile,currentListIndex);

  }else{

   var tmpIndex=currentListIndex/1;

   ajax_optionDiv.innerHTML = '';

   var ajaxIndex = ajax_list_objects.length;

   ajax_list_objects[ajaxIndex] = new sack();

   var url = ajax_list_externalFile + '?' + paramToExternalFile + '=1&letters=' + inputObj.value.replace(" ","+");

   ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get

   ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex); }; // Specify function that will be executed after file has been found

   ajax_list_objects[ajaxIndex].runAJAX();  // Execute AJAX function

  }

 }

 function ajax_option_keyNavigation(e)

 {

  if(document.all)e = event;

  if(!ajax_optionDiv)return;

  if(ajax_optionDiv.style.display=='none')return;

  if(e.keyCode==38){ // Up arrow

   if(!ajax_list_activeItem)return;

   if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;

   ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling,true);

  }

  if(e.keyCode==40){ // Down arrow

   if(!ajax_list_activeItem){

    ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);

   }else{

    if(!ajax_list_activeItem.nextSibling)return;

    ajax_options_rollOverActiveItem(ajax_list_activeItem.nextSibling,true);

   }

  }

  if(e.keyCode==13 || e.keyCode==9){ // Enter key or tab key

   if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected')ajax_option_setValue(false,ajax_list_activeItem);

   if(e.keyCode==13)return false; else return true;

  }

  if(e.keyCode==27){ // Escape key

   ajax_options_hide();

  }

 }

 document.documentElement.onclick = autoHideList;

 function autoHideList(e)

 {

  if(document.all)e = event;

  if (e.target) source = e.target;

   else if (e.srcElement) source = e.srcElement;

   if (source.nodeType == 3) // defeat Safari bug

    source = source.parentNode;

  if(source.tagName.toLowerCase()!='input' && source.tagName.toLowerCase()!='textarea')ajax_options_hide();

 }

Recherche en cours de frappe

texte alt http://img.p4ul.me/sjgsce.png

Espace blanc lorsque l'on appuie sur la touche Entrée

texte alt http://img.p4ul.me/c9kbo9.png

On ne voit qu'un peu d'espace blanc, mais il y en a beaucoup. Le site est le suivant : www.allthefestivals.com recherche sur le côté droit.

Tout conseil serait le bienvenu, merci :)

Answer 1

Cela fait beaucoup de code à trier. Si vous pouviez préciser un peu votre question, je suis sûr que vous obtiendriez de meilleures réponses que celle-ci.

En regardant vos résultats, il semble qu'il y ait un espace blanc supplémentaire devant ce que vous insérez dans le texte d'entrée, ainsi qu'un crochet à angle droit supplémentaire le préfixant dans votre code php. Je ne peux pas le dire avec certitude sans analyser une grande partie de votre code, mais se pourrait-il que vous ayez simplement besoin de couper les espaces blancs avant d'insérer le nom (s.trim) ?

Si ce n'est pas un espace blanc, il est probable que vous remplaciez l'entrée par un autre élément (div, etc.), ou que vous ayez un code css qui le pousse vers la droite, et qui peut être copié lorsque vous faites l'insertion javascript.