jQuery 实时搜索 - 过滤 HTML

Question

我在网站上运行了一个实时搜索框，它一切正常并且看起来很棒，但是当我输入内容，然后向下滚动列表进行选择时，当我按 Enter 时，HTML 会进行格式化搜索列表以空格形式进入输入框。

有人知道如何过滤掉这个空白吗？

搜索框

<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="/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="/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="/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();



 }

边输入边搜索

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

按 Enter 时出现空白

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

你只能看到一点点空白，但其实有很多。该网站是:www.allthefestivals.com在右侧搜索。

任何建议都会很好，谢谢:)

Answer 1

伙计，有很多代码需要整理。如果您能稍微缩小问题范围，我相信您会得到比这个更好的答案。

从结果来看，您插入输入文本的内容前面似乎有额外的空格，并且在您的 php 代码中添加了一个额外的直角括号作为前缀。如果不解析大量代码，我无法确定，但是您是否只需要在插入名称(s.trim)之前修剪掉空格？

如果它不是空格，那么很可能您正在用另一个元素(div 等)替换输入，或者您有一个 css 将其推到右侧，可能在您执行 javascript 插入时被复制.