javascript - tag - title html
Intentando que tag-it funcione con una llamada AJAX (7)
Intentando que tag-it funcione con una llamada ajax.
Todo funciona hasta ahora. Excepto que no puedo asignar un tagSource a través de una llamada ajax.
En Firebug, los ''datos'' están regresando:
["Ruby","Ruby On Rails"]
Pero no aparece cuando escribo en el cuadro de entrada.
$(''.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(data) devuelve ["Ruby", "Ruby On Rails"] .
¿Me estoy perdiendo de algo? ¿Alguien más consiguió que esto funcione?
Debe eliminar sus tagSource availableTags , ya que está sobrecargando tagSource , que se utiliza como fuente para la autocompletación.
También puede tratarse de un error tipográfico, pero es " return " y no " eturn ".
Editar:
Creo que el problema es que la función que proporcionó a tagSource no parece devolver nada. Sin embargo, mi conocimiento de JavaScript parece terminar aquí: /
mira esto: ¿Cómo hacer que TagSource funcione con $ .ajax ()? (de la lista de temas de tag-it github).
este es un ejemplo: archivo 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>
(obtenga el archivo tag-it.js de [aquí] [1])
y este es el archivo 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);
?>
Creo que puedes sobreescribir el método de autocompletar desde jquery UI:
$(''.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;
}
});
},
autocomplete: {
delay: 0,
minLength: 2,
source: this.tagSource()
}
});
tagSource ha sido depreciado.
Solo usa:
<script>
$(document).ready(function(){
$("#tagit").tagit({
autocomplete: {
source: "your-php-file.php",
}
});
});
</script>
Puede agregar todos los atributos a esto:
<script>
$(document).ready(function(){
$("#tagit").tagit({
allowSpaces: true,
singleFieldDelimiter: '';'',
allowDuplicates: true,
autocomplete: {
source: "your-php-file.php",
}
});
});
</script>
Parece que esta pregunta no ha sido respondida durante mucho tiempo, apuesto a que ya has encontrado una solución, pero para aquellos que no la tienen es mi respuesta:
La sangría se ensució cuando copié de mi código;)
<input type="hidden" name="tags" id="mySingleField" value="Apple, Orange" disabled="true">
Tags:<br>
<ul id="mytags"></ul>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#mytags").tagit({
singleField: true,
singleFieldNode: $(''#mySingleField''),
allowSpaces: true,
minLength: 2,
removeConfirmation: true,
tagSource: function( request, response ) {
//console.log("1");
$.ajax({
url: "search.php",
data: { term:request.term },
dataType: "json",
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.label+" ("+ item.id +")",
value: item.value
}
}));
}
});
}});
});
y el "search.php" puede encontrar esto en algunos ejemplos de jQuery autocompletados en realidad.
<?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);
?>
Ninguna de estas respuestas funcionó como estaba para mí, así que pensé que volvería y publicaría mi código que funciona.
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);
}
});
}
});
Este código supone que la URL devuelve una cadena codificada JSON (una matriz de cadenas). Luego filtrará cualquier etiqueta que ya haya sido seleccionada en la entrada. Entonces no se repiten en la lista. De lo contrario, esto funciona para mí.
Gracias a los demás por enviarme por el camino correcto.
Solo para agregar
Asumiendo que su página de script se vea como
<script>
$(document).ready(function(){
$("#myULTags").tagit({
allowSpaces: true,
singleFieldDelimiter: '';'',
allowDuplicates: true,
autocomplete: {
source: "searchtag.php",
}
});
});
</script>
Su simple página php si está obteniendo valores de la base de datos se vería como
<?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);
?>
Saludos