Получить значение второго срока с помощью jQuery UI Autocomplete - PullRequest
Новая
       19

Получить значение второго срока с помощью jQuery UI Autocomplete

1 голос
/ 27 марта 2012

Спасибо за ответ, @ ManselUK

Исправлено эта часть с поиском значений (ниже)

Но , когда я SELECT значение, оно не устанавливает значение скрытого элемента, почему бы и нет?

Я получаю сообщение об ошибке: Uncaught TypeError: Cannot set property 'value' of null при выборе значения из autocomplete ..

Php-код, который вызывается при вводе 5 символов: 

   try{

        $occupation = mysql_real_escape_string($_GET['term2']); //////
        echo 'term 2 '. $occupation;
        ///////////////////////////////////////////////////////////
        ///////////////////////////////////////////////////////////////////
        $dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );  
        $sth = $dbh->prepare(
        'SELECT occupID, occupVal From Occupation WHERE occupVal = ?');
        $sth->bindParam(1, $occupation);
        $sth->execute();
        $jsonArray = array();
        while ($result = $sth->fetch(PDO::FETCH_ASSOC)) {
         $jsonArray[] = array(
              'label' => $result['occupVal'], 
              'value' => $result['occupVal']."|".$result['occupID']); 
        }

        print json_encode($jsonArray); // json encode that array
    } // try

блок кода catch{} отправит ошибки в файл, но в этом файле нет ошибок.

Ввод формы HTML: 

<label for="occup">What is your occupation? <br /></label>
                            <div class="ui-widget">
                                <input id="occup" type="text"  name="term2" value="e.g. Carpenter, Developer, etc" onFocus="clearText(this)" /><br />
                                <input type="hidden" id="actualOccup" name="actualOccupval" value="" />

JS, который вызывается при входе во что-то: 

    <script type="text/javascript">
    $(document).ready(function()
    {
        // Zipcode Field
        $('input#zip').autocomplete({

            dataType: "json",
            source: "../src/php/registration/getFanLoc.php",
            minLength: 4,
            select: function(event, args){
                event.preventDefault();
                var joinedValues = args.item.value;
                var id = joinedValues.split("|")[0];
                var cityAndState= joinedValues.split("|")[1];
                document.getElementById('actualZip').value = cityAndState ; 
                document.getElementById('zip').value = id;
            }
        });
        // Occupation Field
        $('input#occup').autocomplete({
        source: function(request, response) {
        $.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
        },
        minLength: 5,
        select: function(event, args){
        event.preventDefault();
        var joinedValues = args.item.value;
        var id = joinedValues.split("|")[0];
        var occupValAndId= joinedValues.split("|")[1];
        $('#actualOccupval').val(occupValAndId); 
        $('#occup').val(id);
    }
});
    });
    </script>

Я пытался отладить: - Проверьте журнал ошибок для этого файла. (без ошибок) - Проверьте запрос SELECT, значение для occupVal в базе данных - это VARCHAR, в SQL значение найдено с помощью occupVal = 'some val here';. Нужны ли в jQuery эти кавычки? - если я получу прямой доступ к getFanOccupation.php?term2=Computer Programmer, он выдаст: term 2 Computer Programmer[{"label":"Computer Programmer","value":"Computer Programmer|183"}] - Что правильно, проблема в том, что если я получу Computer Programmer значение и вставлю его прямо во ввод, или даже начну его записывать, оно

Исправлено JS: - этот код работает, был выбран неверный идентификатор для занятия, поэтому он не отображал значение поля скрытых форм 

    $(document).ready(function()
    {
        // Zipcode Field
        $('input#zip').autocomplete({

            dataType: "json",
            source: "file1.php",
            minLength: 4,
            select: function(event, args){
                event.preventDefault();
                var joinedValues = args.item.value;
                var id = joinedValues.split("|")[0];
                var cityAndState= joinedValues.split("|")[1];
                document.getElementById('actualZip').value = cityAndState ; 
                document.getElementById('zip').value = id;
            }
        });
        // Occupation Field
        $('input#occup').autocomplete({
            source: function(request, response) {
                $.getJSON("file.php", { term2: request.term }, response);
            },
            minLength: 5,
            select: function(event, args){
                event.preventDefault();
                var joinedValues = args.item.value;
                var id = joinedValues.split("|")[0];
                var occupValAndId= joinedValues.split("|")[1];
                $('#actualOccup').val(occupValAndId); 
                $('#occup').val(id);
            }
        });
});

1 Ответ

1 голос
/ 27 марта 2012

Используйте это: 

source: function(request, response) {
   $.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
}

на втором autocomplete. Документы для $ .getJSON () здесь

Из документов:

Объект запроса с единственным свойством, называемым «term», который ссылается назначение в настоящее время в текстовом вводе.Например, когда пользователь ввел «новый йо» в поле города, термин «автозаполнение» будет равен «новый йо».

Полный код: 

$('input#occup').autocomplete({
    source: function(request, response) {
       $.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
    },
    minLength: 4,
    select: function(event, args){
        event.preventDefault();
        var joinedValues = args.item.value;
        var id = joinedValues.split("|")[0];
        var occupValAndId= joinedValues.split("|")[1];
        $('#actualOccupval').val(occupValAndId); 
        $('#occup').val(id);
    }
});

Примечание также изменилосьdocument.getElementById('blah').value = до $('#blah').val(), поскольку вы уже используете jQuery ... документы для метода val () здесь

...