Question

我正在使用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"}]

如果我拿出那个输出＆amp;把它作为源代码放入我的代码中，一切都很好。

$('.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

但是当我的来源调用我的远程网址时，预先输入并不显示＆amp;我没有收到任何错误。

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

有没有人对如何使用查询MySQL数据库的远程URL有任何建议或建议？

Answer 1

使用jquery auto complete如下 1- activete tagsinput <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) {

                              }
                          });
                      }
                  });

- 添加所有referance文件jquery，jquery custom.js自动完成，自动完成css，

似乎无法使用tagsinput-typeahead来处理远程MySQL源代码

1 个答案: