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

I am wondering if it is possible to check the arrays and update the results div when the value of a textbox (input field) is changed without clicking submit.
In my attempt I have tried to use php and jQuery, however to no avail. I want to be able to check the arrays as soon as the user clicks a button and replacing the text in the input field ($query).
Is there any other way I can attempt this?
The code is as follows:

我想知道是否可以在没有单击提交的情况下更改文本框（输入字段）的值时检查数组并更新结果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>

I look forward for your input. :)

我期待着你的意见。 :)

5 个解决方案

#1

Assuming that you don't want to submit your form, you can do that all in javascript.

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

First you need to make sure your values from results are passed correctly to the script:

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

<?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>

Now you will have an object available in your script that you can use to check the values as soon as the button is clicked.

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

So in your function you could use that

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

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
}

Also note that the default for a button element is a submit button, at least in HTML 4 so you should probably cancel the default event if you have a form surrounding your form elements.

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

You can that in a click handler which will at the same time remove your inline javascript:

您可以在单击处理程序中同时删除您的内联javascript：

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

#2

If you want to find user's value in the server side array from javascript, try to use ajax queries:

如果要从javascript中查找服务器端阵列中的用户值，请尝试使用ajax查询：

check.php

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;
}
?>

add jquery to the head of your page and make an ajax query:

将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");
        });
    });
});

#3

One thing you have to realize is that the php code is invoked only once, on your server. It doesn't show on the client-side, so it won't run on the client's browser.

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

Here's a partial solution using jQuery (since you used this tag...). You issue an ajax request from the client side. The function colour becomes:

这是使用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
    });
}

The php script "test.php" will read:

php脚本“test.php”将为：

<?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;
  }
}

?>

This solution is very partial and I haven't tested it. I wrote it to give you a sense of how things should go (there might be other solutions).

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

#4

Right now you're trying to do something that's not possible, which is combining serverside (php) and clientside (js) code. The PHP runs on your server and your js is running in the client browser. So the PHP is already executed before the contents of the page is served to the client, after that the javascript gets executed there.

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

In your case you should either check with an ajax request to check with PHP if the value is in your arrays, or create json objects so you can check values with JS on the client (if you are ok with showing this data in the source)

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

PHP check on ajax request (with jquery):

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

index.php:

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:

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');

Option with json object check in js, generated by php:

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

index.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>

I did not check any of the code, but it will give you a general idea.

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

#5

I dont know if i understand your needs correctly, but I have two suggestions for you:

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

1. If you want to write some functions and handle them by your way - i suggest using angular js.

   如果你想写一些函数并按照你的方式处理它们 - 我建议使用角度js。

2. If you want something like autocomplete - you can use something like Typeahead.

   如果你想要像自动完成一样的东西 - 你可以使用像Typeahead这样的东西。

Edit: Here is an angular js similar problem i think. You can view source of it and analize how it is done Angular example

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

It would help you if you pass standard tutorial of Angular JS just to understand the basics.

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

Edit2: Here is how you can load json data by ajax. Load json by ajax. So in general - you can request some url (instead of json file on server) and get data from server. In your case - you will have to serve some json data from php - and angular js will parse it and you will have your set of data. you can ofcourse also load data from json file and have some cron action to update the file - it all depends of your needs.

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