似乎无法让 tagsinput-typeahead 与远程 MySQL 源一起工作

Posted 2023-05-09

【中文标题】似乎无法让 tagsinput-typeahead 与远程 MySQL 源一起工作

【英文标题】：Can't seem to get tagsinput-typeahead to work with a remote MySQL source

【发布时间】：2017-04-19 08:19:02

【问题描述】：

我正在使用 Bootstrap 3.3.6、JQuery 1.11.0、Bootstrap3-typeahead 4.0.2 和 bootstrap-tagsinput 0.8.0。

这是我的代码：

$(function()   
        $('.tagsinput-typeahead').tagsinput(
          confirmKeys: [13],
          itemValue: 'value',
          itemText: 'text',   
          typeahead: 
                displayKey: 'text',
                afterSelect: function(val)  this.$element.val(""); ,
                source: function (query) 
                    return jQuery.get("typeaheadSource.php?q=" + query);
                 // return jQuery.post("typeaheadSource.php?q=" + query); //  I tried both get and post
                  
            
    );
); 

<div class="form-group">
    <label class="control-label col-md-3">Job Number(s) </label>
    <div class="col-md-8">
            <select multiple="multiple" class="form-control tagsinput-typeahead" name="typeahead" id="typeahead" ></select>
    </div>
</div>

这是我的 typeaheadSource.php：

if (isset($_REQUEST['q']))     
    $query = $_REQUEST['q'];
    $sql = "SELECT jobno, jobname FROM jobs WHERE jobno LIKE '%" . $query . "%' ORDER BY jobno DESC LIMIT 20";
    $result=db_query($sql);
    while($row = db_nextrow($result)) 
        $array[] = array('value' => $row['jobno'], 'text' => $row['jobname']);
    
    if (isset($array)) 
        echo json_encode($array);
    

如果我直接运行 typeaheadSource.php，输出如下所示：

["value":"2012006.00","text":"Monterey Hotel Investigation","value":"2006142.00","text":"Ollendorff Residence","value":"2006141.01","text":"MLK Student Union Peer Review Expanded Scope","value":"2006141.00","text":"MLK Student Union Peer Review"]

如果我将该输出作为源代码放入我的代码中，一切都会很好。

$('.tagsinput-typeahead').tagsinput(
      confirmKeys: [13],
      itemValue: 'value',
      itemText: 'text',
      typeahead: 
            displayKey: 'text',
            afterSelect: function(val)  this.$element.val(""); ,
            source: ["value":"2012006.00","text":"Monterey Hotel Investigation","value":"2006142.00","text":"Ollendorff Residence","value":"2006141.01","text":"MLK Student Union Peer Review Expanded Scope"] 
      
); 

Screen shot

但是当我的源调用我的远程 URL 时，没有显示预输入并且我没有收到任何错误。

source: function (query) 
  return jQuery.get("typeaheadSource.php?q=" + query);

是否有人对如何使用远程 URL 查询 mysql 数据库有任何建议或建议？

【参考方案1】：

使用jquery自动完成如下 1-活动标签输入<input type="text" value="" data-role="tagsinput" /> 绑定 jquery 自动完成 tagsinput 生成此类 bootstrap-tagsinput。 2-这是所需的代码

 $(".bootstrap-tagsinput > input").autocomplete(

                      source: function (request, response) 
                          $.ajax(
                              type: "POST",
                              contentType: "application/json; charset=utf-8",
                              url: url,
                              data: data,
                              dataType: "json",
                              success: function (data) 
                                  response(data.d);
                              ,
                              error: function (result) 

                              
                          );
                      
                  );

- 添加所有参考文件 jquery、jquery custom.js 用于自动完成、自动完成 css，