在同一网页的多个字段中使用jQuery自动填充

时间：2017-03-10 11:56:41

标签： javascript php jquery html autocomplete

对于所有读者，请不要假设这是重复的，因为还有其他人发布了与设置jQuery自动完成相关的问题，以便在同一页面中的多个字段上工作。我花了很多时间查看这样的页面，但是没有一个能帮助解决我的问题。

其他页面通常会讨论在同一页面中有2个或3个字段使用自动完成功能。在我的方案中，我已经有4个字段在同一页面中使用自动完成功能没有问题，但是当我尝试设置其他3个字段以使用自动完成功能时（将我的总数设置为7），自动完成功能根本不适用于字段5,6和7。

在我看来，当您在同一页面中使用太多次时，自动完成功能无法正常工作。因此，如果有人有解决该问题的任何建议（以便我可以获得第5，第6和第7个字段以使用自动完成），请告诉我。

另外，我的问题是我在所有字段上以相同的方式使用标准jQuery代码。但是，对于字段5,6和7，它只是不想工作。

我在下面给出了一些代码来展示我正在使用的内容。这个代码实际上可以在我的前4个字段上运行而没有问题，但是在最后3个字段中没有。代码从数据库表中获得对用户输入的潜在匹配并将其插入用于自动完成的列表中

另外，我实际上已尝试从一个字段中简单地复制和粘贴代码，在该字段中它可以工作到其中一个不起作用的字段。我假设自动完成在我这样做时会起作用，但它只会给我错误的潜在匹配，因为它使用了错误的数据库表。但是，当我这样做时它仍然无法正常工作，因此当我在同一页面中使用它太多次时，代码似乎无法正常工作。

因此，如果有人知道解决此问题的方法，请告诉我。非常感谢您的任何帮助。

HTML代码，用于处理与自动填充功能相关的实际字段之一：

<tr>
    <td align='right'><font color='#FFFFFF'>&nbsp;Position</font></td>
    <td align='left'>
        <input id="autocomplete_contact_position" name='contact_position' style='field_class' value='<?php
        if (isset($_POST['contact_position']))
            echo $_POST['contact_position']; ?>' />
    </td>
</tr>

来自网站index.php文件的代码，该文件响应＆＃39; contact_position＆＃39;字段：

<script type='text/javascript'>
    $(function() { $( "#autocomplete_contact_position" ).autocomplete ( { source: '/contacts/get_contact_positions.php' } ); } );
</script>

＆＃39; get_contact_positions.php＆＃39;从数据库中获取潜在匹配数据的文件，以便它可以显示在自动完成列表中：

<?php
$dbHost = '???.??.??.??';
$dbUsername = '????';
$dbPassword = '????';
$dbName = 'contacts';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);

//get search term
$searchTerm = $_GET['term'];

//get matched data from database
$query = $db->query("SELECT DISTINCT contact_position FROM contact_company WHERE contact_position LIKE '".$searchTerm."%' ORDER BY contact_position ASC");

while ($row = $query->fetch_assoc())
    $data[] = $row['contact_position'];

//return json data
echo json_encode($data);
?>

正如我上面所说，我显示的代码在我的前4个字段中起作用，但在最后3个字段中没有。我真的在同一个地方做事情在所有领域的方式。

1 个答案:

答案 0 :(得分：0)

我有一个纯粹的香草javascript解决方案，试试这个

<强>的index.php 

<!DOCTYPE html>
<html>
<head>
  <title>Autosuggest</title>
  <style>
    #autosuggest{
      position: relative;
      width: 400px;
      display: inline-block;
      vertical-align: top;
    }
    #autosuggest input{
      height: 40px;
      border:1px solid #eee;
      box-sizing: border-box;
      width: 100%;
      padding: 0 2%;

    }
    #autosuggest input:focus{
      outline: none;
    }
    #autosuggest ul{
      position: absolute;
      left: 0px;
      top: 39px;
      list-style: none;
      padding-left: 0px;
      max-height: 200px;
      overflow-y: auto;
      width: 100%;
      margin: 0px;
    }
    #autosuggest ul li{
      padding: 5px;
      border:1px solid #eee;
      border-top: none;
    }
  </style>
</head>
<body>

<h1>The XMLHttpRequest Object</h1>

<h3>Start typing a name in the input field below:</h3>

<form action=""> 
<div id="autosuggest">
<input type="text" id="txt1" onkeyup="showHint(this.value, 'txtHint', this.id)">
<ul id="txtHint"></ul>
</div>

<div id="autosuggest">
<input type="text" id="txt2" onkeyup="showHint(this.value, 'txtHint2', this.id)">
<ul id="txtHint2"></ul>
</div>

<div id="autosuggest">
<input type="text" id="txt3" onkeyup="showHint(this.value, 'txtHint3', this.id)">
<ul id="txtHint3"></ul>
</div>
</form>

<script>
function showHint(str, id, current_id) {
  var xhttp;
  if (str.length == 0) { 
    document.getElementById(id).innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(id).innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "gethint.php?q="+str+"&id="+current_id, true);
  xhttp.send();   
}
// set value of txt1
function sendToInput(str, id, current_id) {
  document.getElementById(id).value = str;
  document.getElementById(current_id).innerHTML = "";
}
</script>

</body>
</html>

<强> gethint.php 

<?php
$a = [
'Mira Road',
'Chembur',
'Andheri West',
'Kharghar',
'Malad West',
'Andheri East',
'Bandra West',
'Goregaon West',
'Kandivali East',
'Ghodbunder Road',
'Navi Mumbai',
'Bhandup West',
'Borivali West',
'Panvel',
'Khar East',
'Kandivali West',
'Goregaon East',
'90 Feet Road',
'Nelson Manickam Road',
'Abdul Rehman Street',
'Agripada',
'Airoli',
'Airoli Sector 4',
'Airoli Sector 8',
'Altamount Road',
'Ambarnath',
'Ambarnath East',
'Ambernath West',
'Amboli',
'Andheri Kurla Road',
'Andheri Sahar Road',
'Antop Hill',
'Apollo Bunder',
'August Kranti Maidan',
'Babulnath Road',
'Badlapur',
'Ballard Estate',
'Bandra East',
'Belapur',
'Bhandup',
'Bhandup East',
'Bhayandar',
'Bhayandar East',
'Bhayandar Wada',
'Bhayandar West',
'Bhayander',
'Bhayander East',
'Bhayander West',
'Bhindi Bazaar',
'Bhiwandi',
'Bhiwandi',
'Bhoiwada',
'Bhulabhai Desai Road',
'Bhuleshwar',
'Bhyandar East',
'Boisar',
'Boisar West',
'Borivali',
'Borivali East',
'Breach Candy',
'Byculla',
'Byculla East',
'Byculla West',
'CP Tank',
'Chhatrapati Shivaji Terminus',
'Carnac Bunder',
'CBD Belapur',
'CBD Belapur Sector 11',
'Chakala',
'Chandivali',
'Charkop',
'Charni Road',
'Charni Road East',
'Chembur Camp',
'Chembur Colony',
'Chembur East',
'Chembur West',
'Chinch Bandar',
'Chinch Bunder',
'Chinchpokli',
'Chinchpokli East',
'Chinchpokli West',
'Chira Bazaar',
'Chowpatti',
'Chuna Bhatti',
'Churchgate',
'Colaba Causeway',
'Cotton Green',
'Cotton Green West',
'Crawford Market',
'Cuffe Parade',
'Cumbala Hill',
'Currey Road',
'Dadabhai Naoroji Road',
'Dadar East',
'Dadar T T',
'Dadar West',
'Dahisar',
'Dahisar East',
'Dahisar West',
'Dana Bunder',
'Delisle Road',
'Deonar',
'Deonar East',
'Dharavi',
'Dhobhi Talao',
'Dhobi Talao',
'Dockyard',
'Dombivali',
'Dombivali East',
'Dombivali West',
'Dongri',
'Elphinstone Road',
'Flora Fountain',
'Fort',
'Gamdevi',
'Ghansoli',
'Ghatkopar',
'Ghatkopar East',
'Ghatkopar West',
'Ghodbandar Road',
'Girgaon',
'Girgaon Chowpatty',
'Girgaum',
'Goregaon East',
'Goregaon West',
'Govandi',
'Govandi East',
'Govandi West',
'Gowalia Tank',
'Grant Road',
'Grant Road East',
'Grant Road West',
'Green Park Extension',
'Gulalwadi',
'Haji Ali',
'Horiman Circle',
'Hughes Road',
'Hutatma Chowk',
'J B Nagar',
'Jacob Circle',
'Jogeshwari',
'Jogeshwari East',
'Jogeshwari West',
'Juhu Scheme',
'Juhu Tara Road',
'Kalachowki',
'Kala Ghoda',
'Kalamboli',
'Kalbadevi',
'Kalina',
'Kalwa',
'Kalwa West',
'Kalyan',
'Kalyan East',
'Kalyan West',
'Kamothe',
'Kandivali',
'Kanjur Marg East',
'Kanjur Marg West',
'Kanjurmarg',
'Kanjurmarg East',
'Kanjurmarg West',
'Kazi Sayed Street',
'Kemps Corner',
'Khar',
'Khar Danda',
'Khar West',
'Kharghar Sector 12',
'Kharghar Sector 2',
'Kharghar Sector 7',
'Khetwadi',
'Khopoli',
'Kings Circle',
'Kopar Khairane',
'Koper Khraine',
'Andheri Kurla Road',
'Kurla East',
'Kurla West',
'Lal Bahadur Shastri Marg',
'Lal Baug',
'Lalbaug',
'Lamington Road',
'LBS Marg',
'Link Road',
'Lohar Chawl',
'Lokhandwala',
'Parel',
'Lower Parel East',
'Lower Parel West',
'M G Road',
'Mahakali Caves Road',
'Mahalaxmi',
'Mahalaxmi West',
'Mahape',
'Mahim',
'Mahim East',
'Mahim West',
'Malabar Hill',
'Aarey Milk Colony',
'Airport',
'Ambewadi',
'Andheri',
'Asvini',
'Azad Nagar',
'BPT Colony',
'BN Bhavan',
'Bandra',
'Bazargate',
'Bharat Nagar',
'Bhavani Shankar Road',
'CGS Colony',
'Air India Staff Colony',
'Century Mills Worli',
'Chamar Baug',
'Colaba',
'Cotton Exchange',
'Dadar Colony',
'Dadar',
'Danda',
'Dockyard Road',
'Dr Deshmukh Marg',
'Falkland Road',
'Girgaon Mdg',
'Gokhale Road',
'Goregoan',
'Government Colony',
'HMP School',
'Haffkine Institute',
'Haines Road',
'Hanuman Road',
'High Court Building',
'Holiday Camp',
'INS Hamla',
'Central Building',
'Parel Naka',
'Oshiwara',
'Opera House',
'New Yogakshema',
'New Prabhadevi Road',
'N S Patkar Marg',
'Mori Road',
'Mazgaon Road',
'JJ Hospital',
'Juhu',
'Kamathipura',
'Ketkipada',
'Kherwadi',
'Kidwai Nagar',
'Liberty Garden',
'Mazagon Dock',
'Naigaon',
'Mumbai Central',
'Orlem',
'Nagardas Road',
'Madhavbaug',
'Khar Delivery',
'MPT',
'M A Marg',
'Magathane',
'LBSNE College',
'Mazagaon',
'Matunga Railway Workshop',
'Motilal Nagar',
'Nariman Point',
'International Airport',
'Irla',
'Malad',
'Mantralaya',
'Marine Lines',
'Marol Naka',
'Prabhadevi',
'Princess Dock',
'Raj Bhavan',
'Rajendra Nagar',
'Ramwadi',
'Ranade Road',
'Rani Sati Marg',
'SRPF Camp',
'S Savarkar Marg',
'S.K. Nagar',
'Sahar PT Colony',
'Sahargaon',
'Santacruz Central',
'Santacruz P AND T Colony',
'Santacruz',
'Secretariat',
'SEEPZ',
'Sewri',
'Sharma Estate',
'Shroffmahajan',
'Shroff Mahajan',
'Stock Exchange',
'Tajmahal',
'Tajmahal Hotel',
'Tank Road',
'Tardeo',
'Taj Mahal Hotel',
'Thakurdwar',
'Town Hall',
'Tulsiwadi',
'VJB Udyan',
'VK Bhavan',
'VP Road',
'VWTC',
'Vakola',
'Vesava',
'Vidyanagari',
'Vileeparle',
'Vile Parle',
'Wadala',
'Worli',
'Ambarnath West',
'Kharghar',
'spacer',
'spacer'
];
// get the q parameter from URL
$q = $_REQUEST["q"];
$id = $_REQUEST["id"];
$hint = "";
// lookup all hints from array if $q is different from "" 
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = "<li onclick=\"sendToInput(this.innerHTML,'$id', parentNode.id)\">$name</li>";
            } else {
                $hint .= "<li onclick=\"sendToInput(this.innerHTML, '$id', parentNode.id)\">$name</li>";
            }
        }
    }
}

// Output "no suggestion" if no hint was found or output correct values 
echo $hint === "" ? "<li onclick=\"sendToInput(this.innerHTML, '$id',parentNode.id)\">All Mumbai</li>" : $hint;

?>

我希望它会帮助你

相关问题
最新问题