使用jQuery UI自动完成

Question

感谢您的响应第二期限的抓斗价值，@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： - 此代码的工作，是为职业选择错误的ID，这就是为什么它不显示隐藏的表单字段值

$(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); 
      } 
     }); 
}); 

Answer 1

使用此：

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

第二个autocomplete。 Docs for $.getJSON() here

从文档：

A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".

全码：

$('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 ... docs for the val() method here