【问题标题】:using autosuggest to fill in an input text field after user enters their input, using jquery在用户输入输入后,使用自动建议填写输入文本字段,使用 jquery
【发布时间】:2011-04-08 13:14:13
【问题描述】:

我正在尝试使用 jquery 的 autosuggest 插件来获取用户输入,jquery 输入到 php mysql 脚本以获取信息,然后将用户输入替换为从 jquery 请求中检索到的内容。现在这应该让你们所有人难过一分钟。

首先...如果我只用纯文本替换自动建议脚本中返回的文本,我的 jquery javascript 函数会完美地返回该值。但是,如果我尝试从脚本返回查询的数据,那么这就是我得到返回数据的零(0)的时候。

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

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

  1. 我确保自动建议脚本连接到数据库,查询有效,数据确实存在于表中,并且使用辅助表单正确回显找到的结果集向脚本发送一个发布请求,它会准确地响应它应该的数据,所以我知道我的查询脚本可以正常工作。但同时我怀疑它是问题的一部分。

  2. 我测试了我的 javascript 函数 AcctNmb 是通过使用警报在更改时触发的,而且我可以看到该函数一直通过我在输入文本字段上收到的响应进行更改,加载类被打开,值改变,加载类被移除,功能完全完成。

  3. 1234563两条线之间的差异使世界在这方面有所不同。

//编辑 我试图将查询脚本更改为老式的查询方法,但我仍然得到相同的结果。如果我回显查询的数据,如果我回显一串文本,则会得到“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 **** ');

【问题讨论】:

  • 你的问题太大了,我怀疑你会得到很多答案...确保在测试表单(或任何 ajax 请求)时打开了 firebug 的控制台选项卡,查看请求和响应
  • 我刚刚安装了 firebug,看起来这方面会有一些学习,但谢谢你的建议,我会试一试看看发生了什么。非常感谢。
  • 看起来好像我的请求没有被发送,因为我认为我应该发送一个对象而不是我认为我发送的文本,非常感谢你,因为现在我明白了什么正在发生。来自萤火虫:queryString [object HTMLInputElement] Source queryString=%5Bobject+HTMLInputElement%5D

标签: php javascript jquery mysql autosuggest


【解决方案1】:

一旦我的开发服务器完成自我更新,我将开始回答这个问题。但是,我会尝试使用您列出的替代 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 请求运行。准备好开发服务器后,我将进行更详细的测试。

【讨论】:

    【解决方案2】:

    问题的答案是传递 '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 />
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-07-14
      • 2016-02-27
      • 1970-01-01
      • 2015-02-13
      • 2016-03-25
      相关资源
      最近更新 更多