从同一文件自动完成2个文本框

时间:2015-08-25 12:03:08

标签: php jquery

我有一个自动完成代码,在查询一个文本框时工作得很好,但是当尝试自动填充2个文本字段时,两个使用相同的URL,第一个返回第二个框中的值为如下面的屏幕截图所示:

enter image description here

代码如下:

的index.php



$(document).ready(function() {
  $("#search-box").keyup(function() {
    $.ajax({
      type: "POST",
      url: "readCountry.php",
      data: 'keyword=' + $(this).val(),
      beforeSend: function() {
        $("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
      },
      success: function(data) {
        $("#suggesstion-box").show();
        $("#suggesstion-box").html(data);
        $("#search-box").css("background", "#FFF");
      }
    });
  });
});

function selectCountry(val) {
  $("#search-box1").val(val);
  $("#suggesstion-box1").hide();
}

$(document).ready(function() {
  $("#search-box1").keyup(function() {
    $.ajax({
      type: "POST",
      url: "readCountry.php",
      data: 'keyword=' + $(this).val(),
      beforeSend: function() {
        $("#search-box1").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
      },
      success: function(data) {
        $("#suggesstion-box1").show();
        $("#suggesstion-box1").html(data);
        $("#search-box1").css("background", "#FFF");
      }
    });
  });
});

function selectCountry(val) {
  $("#search-box").val(val);
  $("#suggesstion-box").hide();
}

body {
  width: 610px;
}
.frmSearch {
  border: 1px solid #F0F0F0;
  background-color: #C8EEFD;
  margin: 2px 0px;
  padding: 40px;
}
#country-list {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 190px;
}
#country-list li {
  padding: 10px;
  background: #FAFAFA;
  border-bottom: #F0F0F0 1px solid;
}
#country-list li:hover {
  background: #F0F0F0;
}
#search-box {
  padding: 10px;
  border: #F0F0F0 1px solid;
}

<html>

<head>
  <TITLE>jQuery AJAX Autocomplete - Country Example</TITLE>

  <head>

    <body>
      <div class="frmSearch">
        <input type="text" id="search-box" placeholder="Country Name" />
        <div id="suggesstion-box"></div>
        <input type="text" id="search-box1" placeholder="Country Name" />
        <div id="suggesstion-box1"></div>
      </div>
    </body>

</html>
&#13;
&#13;
&#13;

readCountry.php

           <?php

    if(!empty($_POST["keyword"])) {

    $Name=$_POST["keyword"];
    $username="********";
    $password="********";
    $lc = ldap_connect("********") or
    die("Couldn't connect to AD!");
    ldap_set_option($lc, LDAP_OPT_PROTOCOL_VERSION, 3);
    ldap_bind($lc,$username,$password);
    $base = "OU=********,DC=********,DC=********";
    $filt = "(&(&(&(objectCategory=person)(objectClass=user)(name=$Name*))))";
    $sr = @ldap_search($lc, $base, $filt);
    $info = ldap_get_entries($lc, $sr);
    for ($i = 0; $i < $info["count"]; $i++) {
   <li onClick="selectCountry('<?php echo $info[$i]["cn"][0] ?>');"><?php echo $info[$i]["cn"][0] ?></li>
    }
    if ($i == 0) {
    echo "No matches found!";
    } }

我需要什么:

它应该在各自的文本框中返回每个搜索到的值。

enter image description here

感谢任何帮助:)提前感谢! :)

1 个答案:

答案 0 :(得分:1)

我有重复的函数名和文件名。分离文件,它开始工作得很好! :)

  $(document).ready(function() {
    $("#search-box").keyup(function() {
    $.ajax({
      type: "POST",
      url: "readCountry1.php",
      data: 'keyword=' + $(this).val(),
      beforeSend: function() {
        $("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
      },
      success: function(data) {
        $("#suggesstion-box").show();
        $("#suggesstion-box").html(data);
        $("#search-box").css("background", "#FFF");
      }
    });
    });
   });

    function selectCountry1(val) {
    $("#search-box1").val(val);
    $("#suggesstion-box1").hide();
   }

$(document).ready(function() {
  $("#search-box1").keyup(function() {
    $.ajax({
      type: "POST",
      url: "readCountry.php",
      data: 'keyword=' + $(this).val(),
      beforeSend: function() {
        $("#search-box1").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165px");
      },
      success: function(data) {
        $("#suggesstion-box1").show();
        $("#suggesstion-box1").html(data);
        $("#search-box1").css("background", "#FFF");
      }
    });
    });
    });

function selectCountry(val) {
  $("#search-box").val(val);
  $("#suggesstion-box").hide();
}