JavaScript - как получить полное значение для события onChange из функции автозаполнения - PullRequest
Новая
       10

JavaScript - как получить полное значение для события onChange из функции автозаполнения

0 голосов
/ 11 октября 2011

Прежде всего, я новичок в Javascript. Мне нужна конкретная помощь, а не только объяснения, что делать. Thx!

Описание проблемы:

У меня есть текстовое поле, которое после того, как пользователь начинает набирать его, генерирует выпадающий список со значениями из базы данных .... в основном функция автозаполнения.

На основании значения в этом текстовом поле необходимо инициировать другой процесс с использованием значения. Но проблема в том, что значение - это только то, что пользователь ввел в поле, а не то, что пользователь выбрал из списка автозаполнения.

пример:

Я набираю "bo", и список автозаполнения генерирует "boeing". Я нажимаю на Боинг, чтобы заполнить поле ... но выбрано значение "Бо".

Как я могу получить полное значение и использовать его в событии onChange, описанном ниже?

Конкретный материал:

1) поля: 

<input type=\"text\" size=\"30\" name=\"manuList\"
    id=\"inputString\" value=\"$_POST[manu_prev]\" 
    onkeyup=\"lookup(this.value);\" onblur=\"fill();\" 
    onChange=\"htmlData('get_model.php', 'ch='+this.value)/>

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

2) функция htmlData нуждается в значении поля (событие onChange), но, как объяснено выше, только то, что пользовательские типы хранятся в this.value, а не то, что выбирается из списка. Я хочу напечатать значение, выбранное пользователем этим: onChange = \ "htmlData ('get_model.php', 'ch =' + this.value) Но вместо того, чтобы печатать полное значение «boeing», он напечатает «bo», который пользователь набрал для создания списка. 

function htmlData(url, qStr)
{
   if (url.length==0)
   {
       document.getElementById("txtResult").innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }

   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

Инициированный php-скрипт "get_model.php" печатает значение: 

 echo $_GET['ch'];

Другие функции, используемые для автоматического завершения: 

function lookup(inputString)
{
  if(inputString.length == 0)
  {
    // Hide the suggestion box.
    $('#suggestions').hide();
  } else
  {
    $.post("rpc.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);
}

function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}

function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
       document.getElementById("txtResult").innerHTML= xmlHttp.responseText;
   }
   else 
   {
       //alert(xmlHttp.status);
   }
}

1 Ответ

1 голос
/ 11 октября 2011

Вам необходимо прослушать событие в списке, который вы создаете - можете ли вы привести пример вывода, который заполняет autoSuggestionsList

Например, это может быть список, который добавляется следующей строкой:

$('#autoSuggestionsList').html(data);

, что может дать вам 

<div class=\"suggestionList\" id=\"autoSuggestionsList\">
      <ul id="unOrderedList">
          <li value="2">Whatever</li>
          ......
      </ul>
</div>

затем вы можете настроить прослушиватель событий на <li> 's ... 

$('#unOrderedList li').click(function(){
      var value = $(this).attr('value');
      // Do what every you want with the data.....
  });

Это заменит событие onchange в поле ввода

...