3

我正在为我的网站使用 PHP、MySQL、Smarty、jQuery、AJAX 等。现在我正在尝试创建一个输入字段(具有 id user_name) 启用自动完成。我想在用户开始输入输入字段时给他一些建议。我将用户输入的值作为参数传递,根据收到的参数从 MySQL 数据库中获取建议,将获取的数据库记录转换为 json 响应并尝试将其作为建议显示给用户。但不幸的是,当用户输入时,我无法以 json 格式向用户显示我收到的建议。如果我在 firbug 中观察到,请求正常进行,json 响应也正常接收,但未显示在文本字段下方作为建议。在 firebug 控制台中也没有发现错误。供您参考,我将代码放在下面。HTML(来自 smarty 的代码)部分:

<html>
<head>
<link rel="stylesheet" type="text/css" href="{$control_css_url}ui-lightness/jquery-ui-1.10.3.custom.css">  
<link rel="stylesheet" type="text/css" href="{$control_css_url}autocomplete.css">
<script src="{$control_js_url}vendor/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{$control_js_url}jquery-ui/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<form id="view-student_result-form" name="view_student_result" action="{$control_url}modules/reports/report_student_result.php" method="post">
  <input type="hidden" name="op" id="op" value="get_student_result" >   
        <div class="w50">              
          <ul>
            <li>
              <label>Class</label>
              <div class="form-element">
                <select name="class_id" id="class_id" onchange="get_section_by_class(this.value, 'get_section_by_class', '#section_id'); return false;">
                  <option value="">-Select Class-</option> 
                  {foreach from=$all_class item=class key=key} 
                  <option value="{$class.group_id}" {if $class_id == $class.group_id} selected="selected"{/if}>{$class.group_name}</option>
                  {/foreach}
                  </select>
                </div>
            </li>
             <li>
              <label>Name</label>
              <div class="form-element" id="friends" class="ui-helper-clearfix">
                <input type="text" class="" name="user_name" id="user_name" value="{$user_name}" />
              </div>
            </li> 
            <li>
              <label>Section</label>
              <div class="form-element">
                <select name="section_id" id="section_id">
                {if empty($section_id)}
                <option value="">-Select Section-</option> 
                {else}
                <option value="all">All</option>
                {/if}
                {foreach from=$all_section_by_class item=section key=key} 
                <option value="{$section.group_id}" {if $section_id==$section.group_id} selected="selected"{/if}>{$section.group_name}</option>
                {/foreach}
                </select>
              </div>
            </li>          
          </ul>
        </div>
      </form>
  </body>
</html>
{literal}
<script language="javascript" type="text/javascript">
$(function() {  
  //attach autocomplete  
  $("#user_name").autocomplete({  

  //define callback to format results  
    source: function(req, add) { 
    var class_id   = $('#class_id').val();
    var section_id = $('#section_id').val(); 

  //pass request to server  
      $.getJSON("report_student_result.php?callback=?&op=get_student_names&class_id="+class_id+"&section_id="+section_id, req, function(data) {  

        //create array for response objects  
        var suggestions = [[]];  

        //process response  
        $.each(data, function(i, val){                                
          suggestions.push(val.name);  
        });  

        //pass array to callback  
        add([suggestions]);  
      });  
    },  

    //define select handler  
    select: function(e, ui) {  

      //create formatted friend  
      var friend = ui.item.value,  
          span = $("<span>").text(friend),  
          a = $("<a>").addClass("remove").attr({  
            href: "javascript:",  
            title: "Remove " + friend  
    }).text("x").appendTo(span);  

    //add friend to friend div  
    span.insertBefore("#user_name");  
  },  

  //define select handler  
  change: function() {  

      //prevent 'user_name' field being updated and correct position  
      $("#user_name").val("").css("top", 2);  
    }  
  }); 
  //add click handler to friends div  
  $("#friends").click(function(){  
    //focus 'user_name' field  
    $("#user_name").focus();  
  });  

  //add live handler for clicks on remove links  
  $('#friends').on("click", ".remove", document.getElementById("friends"), function(){ 
  //$(".remove", document.getElementById("friends")).live("click", function(){                   
    //remove current friend  
    $(this).parent().remove();  

    //correct 'user_name' field position  
    if($("#friends span").length === 0) {  
      $("#user_name").css("top", 0);  
    }                 
  });                      
});
</script>
{/literal}

现在来自 PHP 文件的代码(来自文件 report_student_result.php 的一种情况):

<?php
global $gDb; 

  $op = $request['op'];
switch($op) {
case'get_student_names':
$param = $_GET["term"];
        $group_id = $request['class_id'];

        if($request['section_id'] !='all')
          $group_id = $request['section_id'];

        if ($group_id != '') {
          $sql  =" SELECT u.user_id, CONCAT(u.user_first_name, ' ', u.user_last_name) as full_name ";
          $sql .=" FROM ".TBL_USERS." as u JOIN ".TBL_USERS_GROUPS_SUBSCRIBE." as ugs ON u.user_id = ";
          $sql .=" ugs.subscribe_user_id WHERE ugs.subscribe_group_id = ".$group_id." AND (u.user_first_name ";
          $sql .=" REGEXP '^$param' OR  u.user_last_name REGEXP '^$param')";
        } else {
          $sql  =" SELECT user_id, CONCAT(user_first_name, ' ', user_last_name) as full_name ";
          $sql .=" FROM ".TBL_USERS." WHERE user_first_name REGEXP '^$param' OR user_last_name ";
          $sql .=" REGEXP '^$param'";    
        }

        $gDb->Query( $sql );
        $data = $gDb->FetchArray(); 

        $response = $_GET["callback"] . "(" . json_encode($data) . ")";
        echo $response;

        die;

  }
?>

如果您想要更多信息,例如我在用户输入文本时收到的 json 响应,我可以为您提供。上面的代码工作正常,唯一的问题是显示在具有 id user_name的文本字段下收到的建议。请帮我解决这个问题。期待您的回复。提前致谢。

4

2 回答 2

0

你可以试试这个。我认为它肯定会解决您正确显示 json 响应值的问题。

<script language="javascript" type="text/javascript">
$(function() {
  $( "#user_name" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "report_student_result.php",
      dataType: "json",
      data: {
        request_type: "ajax",
        op: "get_student_names",
        class_id: $('#class_id').val(),
        section_id: $('#section_id').val(),
        name_startsWith: request.term
      },
      success: function( data ) {
        response(
          $.map(data, function(item) {
            return {
              label: item.full_name,
              value: item.full_name
            }
          })
        );
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {
    if(ui.item) { 
      $(event.target).val(ui.item.value);
    }
    return false;
  },
  open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
  },
  close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  }
  });
});
</script>
于 2013-10-05T12:29:07.950 回答
0
<!--For location search start-->
<link rel="stylesheet" href= "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
  .ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
 }
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
  _renderMenu: function( ul, items ) {
  var that = this,
  currentCategory = "";
  $.each( items, function( index, item ) {
   if ( item.category != currentCategory ) {
     ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
     currentCategory = item.category;
     }
   that._renderItemData( ul, item );
   });
}
});
</script>
<script>
$(function() {
var data = [
<?php
  $sql_all_location="SELECT LocationId,LocationName,ParentLocationId FROM wp_location_master WHERE LocationLevel<7";
  $query_all_location=mysql_query($sql_all_location);
  while($fetch_all_location=mysql_fetch_assoc($query_all_location))
   {
   $sql_parent_location="SELECT LocationName FROM wp_location_master WHERE LocationId='".$fetch_all_location['ParentLocationId']."'";
   $query_parent_location=mysql_query($sql_parent_location);
   $fetch_parent_location=mysql_fetch_assoc($query_parent_location);
?>
{ label: "<?php echo $fetch_all_location['LocationName'];?>", category: "<?php echo $fetch_parent_location['LocationName']; ?>" },
<?php
}
?>
];
$("#search").catcomplete({
  delay: 0,
  source: data
});
});
</script>
<!--For location search end-->
于 2013-10-03T07:48:26.757 回答