Javascript 试图让tag与AJAX调用一起工作_Javascript_Jquery_Autocomplete_Tag It

Javascript 试图让tag与AJAX调用一起工作

javascript jquery autocomplete

Javascript 试图让tag与AJAX调用一起工作,javascript,jquery,autocomplete,tag-it,Javascript,Jquery,Autocomplete,Tag It,尝试使用ajax调用开始工作到目前为止一切正常。除此之外，我无法通过ajax调用分配标记源在firebug中，“数据”返回： ["Ruby","Ruby On Rails"] 但当我在输入框中输入时，它并没有显示出来 $('.tags ul').tagit({ itemName: 'question', fieldName: 'tags', removeConfirmation: true, availableTags: ["c++", "java", "php", "ja

尝试使用ajax调用开始工作

到目前为止一切正常。除此之外，我无法通过ajax调用分配标记源

在firebug中，“数据”返回：

["Ruby","Ruby On Rails"]

但当我在输入框中输入时，它并没有显示出来

$('.tags ul').tagit({
  itemName: 'question',
  fieldName: 'tags',
  removeConfirmation: true,
  availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"],
  allowSpaces: true,
  // tagSource: ['foo', 'bar']
  tagSource: function() {
    $.ajax({
      url:        "/autocomplete_tags.json",
      dataType:   "json",
      data:       { term: 'ruby' },
      success:    function(data) {
        console.log(data);
        return data;
      }
    });
  }
});

console.log（数据）

[“Ruby”，“RubyonRails”]

我是不是遗漏了什么？还有其他人可以这样做吗？

您应该删除您的

可用标签，因为您正在重载tagSource
，该标签用作自动完成的源代码
这也可能是一个输入错误，但它“返回”
”，而不是“eturn
”
编辑：
我认为问题在于您提供给tagSource
的函数似乎没有返回任何内容。然而，我的javascript知识似乎到此为止：/
这个问题似乎很久没有得到答案了，我打赌你已经找到了解决方案，但对于那些没有找到答案的人，这里是我的答案：
当我从代码中复制时，缩进被弄乱了；）

标签：


jQuery（文档）.ready（函数（）{
jQuery（“#mytags”）.tagit({
单字段：对，
singleFieldNode:$（“#mySingleField”），
allowSpaces:true，
最小长度：2，
Remove确认：正确，
标记源：函数（请求、响应）{
//控制台日志（“1”）；
$.ajax({
url:“search.php”，
数据：{term:request.term}，
数据类型：“json”，
成功：功能（数据）{
响应（$.map）（数据、功能（项）{
返回{
标签：item.label+“（“+item.id+”），
值：item.value
}
}));
}
});
}});
});


“search.php”实际上可以在一些自动完成jQuery示例中找到
<?php
$q = strtolower($_GET["term"]);
if (!$q) return;

$items = array(
    "Great Bittern"=>"Botaurus stellaris",
    "Little Grebe"=>"Tachybaptus ruficollis",
    "Black-necked Grebe"=>"Podiceps nigricollis",
    "Little Bittern"=>"Ixobrychus minutus",
    "Black-crowned Night Heron"=>"Nycticorax nycticorax",
    "Heuglin's Gull"=>"Larus heuglini"
);

function array_to_json( $array ){

    if( !is_array( $array ) ){
        return false;
    }

    $associative = count( array_diff( array_keys($array), array_keys( array_keys( $array )) ));
    if( $associative ){

        $construct = array();
        foreach( $array as $key => $value ){

        // We first copy each key/value pair into a staging array,
        // formatting each key and value properly as we go.

        // Format the key:
        if( is_numeric($key) ){
            $key = "key_$key";
        }
        $key = "\"".addslashes($key)."\"";

        // Format the value:
        if( is_array( $value )){
            $value = array_to_json( $value );
        } else if( !is_numeric( $value ) || is_string( $value ) ){
            $value = "\"".addslashes($value)."\"";
        }

        // Add to staging array:
        $construct[] = "$key: $value";
    }

    // Then we collapse the staging array into the JSON form:
    $result = "{ " . implode( ", ", $construct ) . " }";

} else { // If the array is a vector (not associative):

    $construct = array();
    foreach( $array as $value ){

        // Format the value:
        if( is_array( $value )){
            $value = array_to_json( $value );
        } else if( !is_numeric( $value ) || is_string( $value ) ){
            $value = "'".addslashes($value)."'";
        }

        // Add to staging array:
        $construct[] = $value;
    }

    // Then we collapse the staging array into the JSON form:
    $result = "[ " . implode( ", ", $construct ) . " ]";
}

return $result;
}

$result = array();
foreach ($items as $key=>$value) {
    if (strpos(strtolower($key), $q) !== false) {
    array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key)));
}
if (count($result) > 11)
    break;
}
echo array_to_json($result);

?>

查看以下内容：
（从标签它的github问题列表）
这是一个例子：
HTML文件：
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(document).ready(function() {
$("#mytags").tagit({
  tagSource: function(search, showChoices) {
    $.ajax({
      url: "auto.php",
      data: {search: search.term},
      success: function(choices) {
        showChoices(choices);
      }
    });
  }
});
});
</script>
</head>
<body>
<ul id="mytags">
<li>Tag1</li>
</ul>
</body>
</html>


$（文档）.ready（函数（）{
$（“#mytags”）.tagit({
tagSource:函数（搜索、显示选项）{
$.ajax({
url:“auto.php”，
数据：{search:search.term}，
成功：功能（选择）{
展示选择（选择）；
}
});
}
});
});

Tag1


（从[here][1]获取tag-it.js文件）
这是PHP文件：
<?php
header('Content-type: application/json');
$q = $_GET["search"];
//check $q, get results from your database and put them in $arr
$arr[] = 'tag1';
$arr[] = 'tag2';
$arr[] = $q;
echo json_encode($arr);
?>

这些答案对我来说都不起作用，所以我想我会回来发布我的代码
var tagThis = $(".tagit");
tagThis.tagit({
    tagSource: function(search, showChoices) {
        $.ajax({
            url: "/tags/search",
            data: { search: search.term },
            dataType: "json",
            success: function(data) {
                var assigned = tagThis.tagit("assignedTags");
                var filtered = [];
                for (var i = 0; i < data.length; i++) {
                    if ($.inArray(data[i], assigned) == -1) {
                        filtered.push(data[i]);
                    }
                }
                showChoices(filtered);
            }
        });
    }
});

var tagThis=$（“.tagit”）；
tagThis.tagit({
tagSource:函数（搜索、显示选项）{
$.ajax({
url:“/tags/search”，
数据：{search:search.term}，
数据类型：“json”，
成功：功能（数据）{
var assigned=tagThis.tagit（“assignedTags”）；
var筛选=[]；
对于（变量i=0；i

此代码假定URL返回JSON编码的字符串（字符串数组）。然后，它将过滤掉输入中已选择的所有标记。因此，它们不会在列表中重复。否则，这对我有用
感谢其他人将我发送到正确的路径上。
我认为您可以从jquery UI覆盖自动完成方法：
$（'.tags ul'）.tagit({
项目名称：“问题”，
fieldName:'标记'，
Remove确认：正确，
//可用标签：[“c++”、“java”、“php”、“javascript”、“ruby”、“python”、“c”]
allowSpaces:true，
//标记源：['foo'，'bar']
标记源：函数（）{
$.ajax({
url:“/autocomplete\u tags.json”，
数据类型：“json”，
数据：{
术语：“红宝石”
},
成功：功能（数据）{
控制台日志（数据）；
返回数据；
}
});
},
自动完成：{
延迟：0，
最小长度：2，
来源：this.tagSource（）
}
});
tagSource已折旧
只需使用：
<script>
  $(document).ready(function(){
      $("#tagit").tagit({
     autocomplete: {
    source: "your-php-file.php",
     }
   });
  });
</script>


$（文档）.ready（函数（）{
$（“#tagit”）。tagit({
自动完成：{
来源：“你的php文件.php”，
}
});
});

您可以将所有属性添加到此：
<script>
  $(document).ready(function(){
      $("#tagit").tagit({
         allowSpaces: true,
         singleFieldDelimiter: ';',
         allowDuplicates: true,
         autocomplete: {
           source: "your-php-file.php",
     }
   });
  });
</script>


$（文档）.ready（函数（）{
$（“#tagit”）。tagit({
allowSpaces:true，
singleFieldDelimiter:“；”，
allowDuplicates:对，
自动完成：{
来源：“你的php文件.php”，
}
});
});
只需添加
假设脚本页面看起来像
<script>
  $(document).ready(function(){
      $("#myULTags").tagit({
         allowSpaces: true,
         singleFieldDelimiter: ';',
         allowDuplicates: true,
         autocomplete: {
           source: "searchtag.php",
     }
   });
  });
</script>  


$（文档）.ready（函数（）{
美元（“#myULTags”）.tagit({
allowSpaces:true，
singleFieldDelimiter:“；”，
allowDuplicates:对，
自动完成：{
来源：“searchtag.php”，
}
});
});

若要从数据库中获取值，则简单的php页面如下所示
<?php $link = mysqli_connect("localhost","root","dbpassword","dbname") or die("Couldn't make connection."); ?>

<?php
$q = strtolower($_GET["term"]);
if (!$q) return;

header('Content-type: application/json');


$query_tags = mysqli_query($link,"SELECT TagName FROM `tagstable` WHERE `TagName` LIKE '%".$q."%' LIMIT 10");

$items = array(); // create a variable to hold the information
while ($row = mysqli_fetch_array($query_tags)){ 

  $items[] = $row['TagName']; // add the row in to the results (data) array

}

echo json_encode($items);

?>

应该放“返回数据”，而不是“eturn”；那是个打字错误。应该是“return”@ChristianFazzini tagSource不在tag it？的参数列表中。你能给我解释一下吗？删除可用标签并不能解决任何问题。仍然返回相同的问题：[“Ruby”，“RubyonRails”]
您的标记this.tagit（“assignedTags”）<代码>var assigned=tagThis.tagit（“assignedTags”）
将字段中的当前标记列表作为字符串数组读取到变量assigned
。请问assignedTags是什么意思？你是指SingleFieldNode的id和php页面吗？来源：this.tagSource（），你确定吗？我遵循您的方法，我在控制台中看到了编码的json
<?php $link = mysqli_connect("localhost","root","dbpassword","dbname") or die("Couldn't make connection."); ?>

<?php
$q = strtolower($_GET["term"]);
if (!$q) return;

header('Content-type: application/json');


$query_tags = mysqli_query($link,"SELECT TagName FROM `tagstable` WHERE `TagName` LIKE '%".$q."%' LIMIT 10");

$items = array(); // create a variable to hold the information
while ($row = mysqli_fetch_array($query_tags)){ 

  $items[] = $row['TagName']; // add the row in to the results (data) array

}

echo json_encode($items);

?>