个人中心
gpt4 book ai didi

php - 为什么 "jQueryUI autocomplete"不显示在以下场景中启用自动完成的输入字段中从 PHP 文件接收的 json 值？

转载 作者：搜寻专家 更新时间：2023-10-31 22:05:38 25 4
gpt4 key购买 nike

我正在为我的网站使用 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 的文本字段下收到的建议。请帮我解决这个问题。期待您的回复。提前致谢。

最佳答案

你可以试试这个。我认为它一定会解决您正确显示 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>

关于php - 为什么 "jQueryUI autocomplete"不显示在以下场景中启用自动完成的输入字段中从 PHP 文件接收的 json 值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19138102/

25 4 0
文章推荐： php - preg_replace 匹配字符之间的字符串但排除一些字符 PHP
文章推荐： php - 检查PHP中是否存在xml节点
文章推荐： php - 在 PHP 中查找数组的子集
文章推荐： html - HTML 文档类型中 public ="storage"的含义是什么？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com