繁体   English   中英

在用户输入输入后,使用jquery使用autosuggest填写输入文本字段

[英]using autosuggest to fill in an input text field after user enters their input, using jquery

我正在尝试使用jquery的autosuggest插件来接受用户输入,将输入到php mysql脚本的jquery获取信息,然后将用户输入替换为从jquery请求中检索到的内容。 现在,这将使您感到困惑一分钟。

首先,如果我将自动提示脚本返回的文本替换为纯文本,那么我的jQuery javascript函数会完美地返回该值。 但是,如果我尝试从脚本返回查询的数据,那就是返回的数据为零(0)的时候。

我将提供进行工作所需的代码。 据我所知,我将在该代码中包含问题所在。 我将举例说明什么有效,哪些无效。

在撰写本文之前,我确实测试了几种可能的情况。

  1. 我确保autosuggest脚本连接到db,该查询有效,该表中确实存在数据,并且通过使用辅助形式将找到的结果集正确地回显,该辅助形式仅将发布请求发送至脚本,它准确地响应了它应该提供的数据,因此我知道的查询脚本可以正常工作。 但与此同时,我怀疑这是问题的一部分。

  2. 我测试了我的javascript函数AcctNmb是通过使用警报在更改时被触发的,而且我还可以看到该函数在输入文本字段发生变化,加载类已打开,值为更改后,将删除加载类,该功能将完全完成。

  3. 现在来看问题是否成功,只需转到autosuggest查询php,您将看到我的两行,其中一行提供了有效的响应,另一行提供了0的响应。这是我无法理解两行之间的区别的问题在这方面改变了世界。

//编辑我试图将查询脚本更改为老式的查询方法,但仍然得到相同的结果。 如果我回显查询的数据,则如果我回显文本字符串,则会得到响应“ 0”,然后该文本将返回给我。 我在下面添加了备用查​​询方法。 请任何人看到我在做什么错吗? 就我所知,我只是看不到在变体和文本字符串之间回显差异。

// html表单代码

  <form id="FormVoucher" name="FormVoucher" method="post" action="index.php">
    <table width="100%">
      <tr>
        <td>Supplier Number:</td>
        <td><input type="text" size="25" value="" name="Facctnmb" id="Facctnmb" onChange="AcctNmb(this)" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Invoice Number:</td>
        <td><input type="text" name="Finvnmb" id="Finvnmb" size="25" maxlength="25" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Invoice Amount:</td>
        <td><input type="text" name="Finvamt" id="Finvamt" size="25" maxlength="30" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Invoice Date:</td>
        <td><input type="text" name="Finvdt" id="Finvdt" size="10" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Purchase Order:</td>
        <td><input type="text" name="Fpo" id="Fpo" size="10" maxlength="8" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>Remark:</td>
        <td><input name="Fremark" id="Fremark" type="text" size="30" maxlength="30" AUTOCOMPLETE=OFF /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <div align="left">
      <p>G/L: <input name="Fgl[]" id="Fgl[]" type="text" size="12" maxlength="15" AUTOCOMPLETE=OFF /> Amount: <input name="Famt[]" id="Famt[]" type="text" size="15" maxlength="15" AUTOCOMPLETE=OFF /></p>
      <p id="add-element">Add More G/L Lines For Entry</p>
      <div id="content"></div>
      <input type="submit" value="Submit" />
    </div>
  </form>

// javascript代码

function AcctNmb(inputString){
$('#Facctnmb').addClass('load');
  $.post("acctnmb.php", {queryString: ""+inputString+""}, function(data){
    if(data.length >0) {
      $('#Facctnmb').val(data);
      $('#Facctnmb').removeClass('load');
    }
  });
}

//自动建议查询脚本

<?php
$db = new mysqli('localhost', 'username' ,'password', 'data');

if(!$db) {

  echo 'Could not connect to the database.';
} else {

  if(isset($_POST['queryString'])) {
      $queryString = $db->real_escape_string($_POST['queryString']);
  if(strlen($queryString) >0) {
      $query = $db->query("SELECT acct, mailing_name FROM pub_addrs WHERE acct = '$queryString'");
      if($query) {
        $result = $query->fetch_object();
        $varresults = $result->acct." ".$result->mailing_name;
        echo $varresults; //this one fails
        //echo 'This works'; 

      } else {
        echo 'OOPS we had a problem :(';
      }
  } else {
  // do nothing
  }
  } else {
      echo 'There should be no direct access to this script!';
  }
}
?>

//编辑//备用自动建议查询脚本

<?php
require_once('../Connections/workdata.php');
//select database
mysql_select_db($database_workdata, $workdata);

if(isset($_POST['queryString'])) {
  $queryString = $_POST['queryString'];
  $query = sprintf("SELECT acct, mailing_name FROM pub_addrs WHERE acct = '%s'",$queryString);
  $result = mysql_query($query, $workdata) or die(mysql_error());
  $row_result = mysql_fetch_assoc($result);
  echo $row_result['acct']." ".$row_result['mailing_name'];//this fails
  //echo 'this works';
}
?>

// mysql表测试数据

-- phpMyAdmin SQL Dump
-- version 3.3.6deb1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Sep 05, 2010 at 04:12 PM
-- Server version: 5.1.49
-- PHP Version: 5.3.2-2

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `workdata`
--

-- --------------------------------------------------------

--
-- Table structure for table `pub_addrs`
--

CREATE TABLE IF NOT EXISTS `pub_addrs` (
  `acct` int(11) NOT NULL,
  `mailing_name` varchar(50) NOT NULL,
  `special_payee` int(11) NOT NULL,
  `pub_vendor` varchar(1) NOT NULL,
  `longaddress` varchar(20) NOT NULL,
  `alpha_name` varchar(40) NOT NULL,
  PRIMARY KEY (`acct`),
  KEY `longaddress` (`longaddress`),
  KEY `special_payee` (`special_payee`),
  KEY `alpha_name` (`alpha_name`),
  FULLTEXT KEY `mailing_name` (`mailing_name`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--
-- Dumping data for table `pub_addrs`
--

INSERT INTO `pub_addrs` (`acct`, `mailing_name`, `special_payee`, `pub_vendor`, `longaddress`, `alpha_name`) VALUES
(701, 'DO NOT MAIL- Deleted Account ', 701, 'C', 'C24250 ', '**** DUPLICATE SET-UP **** '),
(702, 'DO NOT MAIL- Deleted Account ', 702, 'C', 'C24603 ', '**** DUPLICATE SET-UP **** ');

开发服务器完成自我更新后,我将全面回答这一问题。 但是,我会尝试使用另一种PHP脚本替代您列出的脚本。

<?php
require_once('../Connections/workdata.php');
//select database
mysql_select_db($database_workdata, $workdata);

if(isset($_POST['queryString'])) {
  $queryString = $_POST['queryString'];
  $query = sprintf("SELECT acct, mailing_name FROM pub_addrs WHERE acct = '%s'",$queryString);
  $result = mysql_query($query, $workdata) or die(mysql_error());
  $row_result = mysql_fetch_assoc($result);
  echo $row_result['acct']." ".$row_result['mailing_name'];//this fails
  //echo 'this works';
}
?>

如果回显“这有效”,实际上确实按预期工作,那么该部分代码中存在问题。

<?php

        // Include the auxiallary files as required
        require_once('../../valentxt3.class.php');

        $testVar = 701;

        // Establish db connection.
        $DBase = new dbConn();
        $tmpStr = "SELECT `acct`, `mailing_name` FROM `pub_addrs` WHERE `acct` = '".$testVar."';";
        $result = $DBase->runQuery($tmpStr);

        // Lets see how many texts there are to send.
        $howMany = mysql_num_rows($result);

        $row_result = mysql_fetch_assoc($result);
        echo $row_result['acct']." ".$row_result['mailing_name']; //this fails
        echo 'this works';

        exit;
?>

上面的代码产生以下输出:

php test.php
X-Powered-By: PHP/5.2.13
Content-type: text/html

701 DO NOT MAIL- Deleted Account this works

显然,这是通过PHP CLI运行的,但是应该通过POST或GET请求工作。 准备好开发服务器后,将进行更详细的测试。

该问题的答案是在表单中传递“ this”的值,而不是对象“ this”。 Firebug报告我正在传递文本字段的对象而不是值。

//萤火虫报告。

queryString [object HTMLInputElement] Source queryString=%5Bobject+HTMLInputElement%5D

//解决方法是使用“ this.value”

<input type="text" size="25" value="" name="Facctnmb" id="Facctnmb" onChange="AcctNmb(this.value)" AUTOCOMPLETE=OFF />

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM