2

この質問が以前に尋ねられたことは知っていますが、最新または機能的な回答を見つけることができませんでした (少なくとも私のアプリケーションでは)。

私の JQuery オートコンプリート ボックスは、ソースとして mysql データベースを使用しています。ユーザーが入力して推奨事項を取得できるようにしたいのですが、フォームを送信する前にドロップダウンの選択肢から選択する必要があります。

私のJavascript：

    <script type="text/javascript">
    $.widget( 'ui.autocomplete', $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var that = this;
            $.ui.autocomplete.currentItems = items;
            $.each( items, function( index, item ) {
                that._renderItemData( ul, item );
            });
        }        
    });
    $.ui.autocomplete.currentItems = [];

    $(function() {

        $("#college").autocomplete({
            source: "search.php",
            minLength: 5
        });
    });

    var inputs = {college: false};

    $('#college').change(function(){
        var id = this.id;
        inputs[id] = false;

        var length = $.ui.autocomplete.currentItems.length;
        for(var i=0; i<length; i++){
            if($(this).val() == $.ui.autocomplete.currentItems[i].value){
                inputs[id] = true;
            }
        }
    });

    $('#submit').click(function(){
        for(input in inputs){
            if(inputs.hasOwnProperty(input) && inputs[input] == false){
                alert('incorrect');
                return false;
            }
        }
        alert('correct');
        $('#college_select_form').submit();
    });
    </script>

私のフォーム：

<form action="choose.php"  method="post" id="college_select_form" name="college_select_form">
                                        <input type="text" id="college"  name="college" class="entry_field" value="Type your school" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Type your school':this.value;" /><input type="submit" id="submit" name="submit" class="submitButton" value="Go" title="Click to select school" />
                                    </form>

Search.php:

<?php

try {
  $conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
}
catch(PDOException $e) {
    echo $e->getMessage();
}

$return_arr = array();

if ($conn)
{
    $ac_term = "%".$_GET['term']."%";
    $query = "SELECT * FROM college_list where name like :term";
    $result = $conn->prepare($query);
    $result->bindValue(":term",$ac_term);
    $result->execute();

    /* Retrieve and store in array the results of the query.*/
    while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
        array_push($return_arr, array('label' => $row['name'], 'value' => $row['name']));
    }


}
/* Free connection resources. */
//$conn = null; 
/* Toss back results as json encoded array. */
echo json_encode($return_arr);

?>

では、これを行うための最良のアプローチは何でしょうか? 私が考えることができる唯一の解決策は、PHP を使用して、テキスト ボックスの値がデータベースの値と一致することを確認することですが、現在のコードでそれを実装する方法がわかりません。

4

6 に答える 6

1

非表示の入力要素をフォームに追加します。

<input type="hidden" name="selectedvalue" id="selectedvalue" />

オートコンプリートにselectイベントハンドラーを追加します。これにより、選択した値が非表示の入力にコピーされます。

$("#college").autocomplete({
        source: "search.php",
        minLength: 5,
        select: function (event, ui) {
            $('#selectedvalue').val(ui.item.value);
        }
    });

次に、投稿されたデータのオートコンプリートフォーム入力を無視します。

于 2013-02-12T11:55:14.720 に答える
1

オートコンプリート オブジェクトをインスタンス化する前に、次のコードを JavaScript に追加します。

$.widget( 'ui.autocomplete', $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var that = this;
        $.ui.autocomplete.currentItems = items;
        $.each( items, function( index, item ) {
            that._renderItemData( ul, item );
        });
    }        
});
$.ui.autocomplete.currentItems = [];

これにより、メニューが表示されるたびに、ユーザーが選択できる現在の項目のリストが に保存され$.ui.autocomplete.currentItemsます。これを使用して、フォームを送信するときにチェックできます。もちろん、この部分をどのように実装するかは、フォームがどの程度動的かによって異なりますが、入力フィールドのリストをハードコーディングし、それらすべてに ID があることを確認する必要がある例を次に示します。

//create an object that contains every input's id with a starting value of false
var inputs = {college: false};

//for each input, you will have a function that updates your 'inputs' object
//as long as all inputs have id's and they all are using autocomplete,
//the first line could be written as: $('input').change(function(){ and the
//function would only need to be written once. It is easier to maintain 
//if you use seperate id's though like so:
$('#college').change(function(){
    var id = this.id;
    inputs[id] = false;

    var length = $.ui.autocomplete.currentItems.length;
    for(var i=0; i<length; i++){
        if($(this).val() == $.ui.autocomplete.currentItems[i].value){
            inputs[id] = true;
        }
    }
});

//when you submit, check that your inputs are all marked as true
$('#submit').click(function(){
    for(input in inputs){
        if(inputs.hasOwnProperty(input) && inputs[input] == false){
            return false; //one or more input does not have correct value
        }
    }
    //all inputs have a value generated from search.php
    $('#myform').submit();
});

アップデート

2 つの例 (機能するものと機能しないもの) の唯一の違いは、他のイベントを入力要素にバインドしていることonclickと、onblur. したがって、リスナーを から に変更することchangeでblur、問題はほとんど解決されます。しかし、Enter/Return キーを押してフォームを送信すると、新しい問題が発生します。したがって、その特定のイベントのリスナーを追加すると、すべてうまくいきます。コードは次のようになります。

var validateInfo = function(elem){
    var id = elem.id;
    inputs[id] = false;

    var length = $.ui.autocomplete.currentItems.length;
    for(var i=0; i<length; i++){
        if($(elem).val() == $.ui.autocomplete.currentItems[i].value){
            inputs[id] = true;
        }
    }
}

$('#college').on('blur', function(){
    validateInfo(this);
}).on('keydown', function(e){
    if(e.which == 13){ //Enter key pressed
      validateInfo(this);
    }
});
于 2012-11-27T00:30:19.013 に答える
1

ユーザーはJavaScriptを無効にして、フォームの入力に必要なものを投稿できるため、常に「choose.php」（サーバー側）で確認する必要があります

$college = mysql_real_escape_string($_GET['college']);
if ($college != "" || $college != null || $college != -1)
{
    //DO STUFF
}

注: SQL インジェクションを防ぐために、常に「mysql_real_escape_string」を使用する必要があります。詳細: http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php

それに応じてsearch.phpで変更します

$ac_term = "%".$_GET['term']."%";

に

$ac_term = "%". mysql_real_escape_string($_GET['term']) ."%";

ユーザーが送信する前にフォームをチェックして、よりユーザーフレンドリーにすることもできます (ユーザーは、ページが更新されてエラーが発生するまで数秒待ちたくありません!)

したがって、次のようなものが役立つかもしれません: Submit Event Listener for a form

function evtSubmit(e) {
  // code
  e.preventDefault();
 // CHECK IT HERE!
};

var myform = document.myForm;
myform.setAttribute('action', 'javascript:evtSubmit();');
于 2012-11-28T23:21:26.610 に答える
0

私が質問を正しく理解していれば、これは私が以前に遭遇したことです。これは、別のプロジェクトからほとんどまっすぐに持ち上げられたコードです。ここではローカルデータソースを使用しましたが、これが削除されたプロジェクトはリモートデータを使用するため、違いはありません。

var valueSelected = '';

$('#college').autocomplete({
    source: ['collegeA', 'collegeB', 'collegeC']
}).on('autocompletechange autocompleteselect', function (event, ui) {
    if (!ui.item) {
        valueSelected = '';
    } else {
        $('#submit').prop('disabled', false);
        valueSelected = ui.item.label;
    }
}).on('propertychange input keyup cut paste', function () {
    if ($(this).val() != valueSelected) {
        valueSelected = '';
    }
    $('#submit').prop('disabled', !valueSelected);
});

これにより、ユーザーが値を選択したかどうかに応じて、プログラムで送信ボタンが有効または無効になります。

ここでフィドル

于 2012-11-29T11:14:53.617 に答える
0

これは JavaScript であるため、項目がオートコンプリート リストから選択されているかどうかだけを気にする必要があります。これは、選択時に変数を true に設定し、変更時に false に設定することで簡単に実行できます。これは、通常のユーザーが学校を選択せず​​に続行するのを防ぐのに十分です. 悪用を防ぐために、投稿後にサーバー側の値を確認する必要があります。すべての通常のユーザーはそのチェックに合格します。

于 2012-11-27T23:47:14.673 に答える