Question

我想知道是否可以检查数组并且在更改文本框（输入字段）的值时更新结果div 而不单击提交。<登记/> 在我的尝试中，我试图使用PHP和jQuery，但无济于事。我希望能够在用户单击按钮并替换输入字段（$query）中的文本后立即检查数组。
还有其他方法我可以尝试这个吗？
代码如下：

<?php 
//arrays
$results = array();
$results["car"] = array( "name" => "toyota");
$results["food"] = array( "name" => "bread");
$results["tool"] = array( "name" => "hammer");
$query = "";
?>
<script>
function colour() {
    document.getElementById("s").value = "colour";
}
function tool() {
    document.getElementById("s").value = "tool";
}
</script>

<div id="form">
<input type="text" value="<?php echo $query; ?>" id="s" />
</div>

<button onclick="colour()">Check colours</button>
<button onclick="tool()">Check tools</button>




<div id="result">
<?php  
         foreach ($results as $key => $val) {
           if ($key === $query) {
               echo " match found! for " . $key;
           }
         }
    ?>
</div>

我期待您的意见。：）

Answer 1

假设您不想提交表单，可以在javascript中完成所有操作。

首先，您需要确保将结果中的值正确传递给脚本：

<?php 
//arrays
$results = array();
$results["car"] = array( "name" => "toyota");
$results["food"] = array( "name" => "bread");
$results["tool"] = array( "name" => "hammer");
?>
<script>
// Generate a variable / object that contains the necessary information
var results = <?php echo json_encode($results); ?>;

function colour() {
    document.getElementById("s").value = "colour";
}
function tool() {
    document.getElementById("s").value = "tool";
}
</script>

现在，您的脚本中将有一个对象可用于在单击按钮后立即检查值。

所以在你的功能中你可以使用

function colour() {
    document.getElementById("s").value = "colour";
    // here you can use `results`
    // you would need to add some details / logic to your question
    // if you need more information
}

另请注意，button元素的默认值是提交按钮，至少在HTML 4中是如此，如果您的表单元素周围有表单，则应该取消默认事件。

你可以在一个点击处理程序中同时删除你的内联javascript：

$('button').on('click', function(event) {
  event.preventDefault();
  // the rest of your click event handler
});

Answer 2

如果你想从javascript中找到服务器端数组中的用户值，请尝试使用ajax查询：

check.php

<?php
$results = array();
$results["car"] = array( "name" => "toyota");
$results["food"] = array( "name" => "bread");
$results["tool"] = array( "name" => "hammer");

echo isExists($results) ? "1" : "0";

function isExists($result){
    if (!isset($_GET['query'])) return false;
    $query = $_GET['query'];
    if (!array_key_exist($query, $results)) return false;
    return true;
}
?>

将jquery添加到页面的头部并进行ajax查询：

$(document).ready(function(){
    $("#button").on("click", function(){
        $.get("check.php?query=" + $("#s").val(), function(result){
           if (result === 1) $("#result").html("found"); else $("#result").html("not found");
        });
    });
});

Answer 3

您必须意识到的一件事是，您的服务器上只调用了一次PHP代码。它不会在客户端显示，因此无法在客户端的浏览器上运行。

这是使用jQuery的部分解决方案（因为你使用了这个标签......）。您从客户端发出ajax请求。功能颜色变为：

function colour() {
    $("#s").val("colour"); // set the value, same as document.getElementById
    $.ajax({
        url: "test.php&value="+$("#s").val(), 
    }).done(function(data) { // this function will run once the results are loaded
        $("#result").html( data ); // set the content of the result div to be the output of the php script
    });
}

php脚本＆＃34; test.php＆＃34;会读到：

<?php 
//arrays
$results = array();
$results["car"] = array( "name" => "toyota");
$results["food"] = array( "name" => "bread");
$results["tool"] = array( "name" => "hammer");

$query = $_GET["value"]
foreach ($results as $key => $val) {
  if ($key === $query) {
    echo " match found! for " . $key;
  }
}

?>

这个解决方案非常局部，我还没有对其进行测试。我写这篇文章是为了让你了解应该如何进行（可能还有其他解决方案）。

Answer 4

现在你正在尝试做一些不可能的事情，即组合serveride（php）和clientside（js）代码。 PHP在您的服务器上运行，您的js在客户端浏览器中运行。因此，在将页面内容提供给客户端之前，PHP已经执行，然后在那里执行javascript。

在您的情况下，您应该检查ajax请求以检查PHP是否在您的数组中，或者创建json对象，以便您可以在客户端上使用JS检查值（如果您可以显示此数据）来源）

PHP检查ajax请求（使用jquery）：

的index.php：

<script type="text/javascript">
    function checkResults(type)
    {
        $('#s').val(type);

        $.get("check.php?type=" + type, (function( data ) {
            $('#result').html(data);
        });

    } 
</script>

<div id="form">
<input type="text" value="" id="s" />
</div>

<button onclick="colour()">Check colours</button>
<button onclick="tool()">Check tools</button>

<div id="result"></div>

check.php：

<?php 
    //arrays
    $results = array();
    $results["car"] = array( "name" => "toyota");
    $results["food"] = array( "name" => "bread");
    $results["tool"] = array( "name" => "hammer");

    if (isset($_GET['type'] && isset($results[$_GET['type']])) {
        die('Match found for ' . $_GET['type']);
    }

    // nothing found
    die('Not found');

json对象的选项检查js，由php生成：

的index.php：

<?php 
    //arrays
    $results = array();
    $results["car"] = array( "name" => "toyota");
    $results["food"] = array( "name" => "bread");
    $results["tool"] = array( "name" => "hammer");
?>

<script type="text/javascript">
    var results = '<?php echo json_encode($results); ?>';

    function checkResults(type)
    {
        $('#s').val(type);

        var $result = $('#result');
        $result.empty();
        for (var key in results) {
            if (results.hasOwnProperty(key)) {
                $result.append('Found match for key' + key + '<br>');
            }
        }
    } 
</script>

<div id="form">
<input type="text" value="" id="s" />
</div>

<button onclick="checkResults('colour')">Check colours</button>
<button onclick="checkResults('tool')">Check tools</button>

<div id="result"></div>

我没有检查任何代码，但它会给你一个大致的想法。

Answer 5

我不知道我是否理解你的需求，但我有两个建议：

如果你想写一些函数并按照你的方式处理它们 - 我建议使用角度js。
如果您想要自动完成功能，您可以使用类似的功能 Typeahead。

编辑：这是一个角度js类似的问题，我认为。您可以查看它的来源并分析它是如何完成的 Angular example

如果您通过Angular JS的标准教程只是为了理解基础知识，那将对您有所帮助。

Edit2：以下是如何通过ajax加载json数据。 Load json by ajax。所以一般来说 - 你可以请求一些url（而不是服务器上的json文件）并从服务器获取数据。在你的情况下 - 你将不得不从PHP提供一些json数据 - 而角js将解析它，你将拥有你的数据集。你当然可以从json文件加载数据并有一些cron动作来更新文件 - 这完全取决于你的需求。

文本输入更改值和即时检查

5 个答案: