|
|
Ok, one step further and now lost in space.
I can call the auto complete in my add/edit page if it is not set as "pop up".
However, if I set add/edit as a pop up, jquery seams not to send the code.
In normal view, I can see via firebug following code at the end of the page:
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 175px; left: 763px; display: none;">
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">BASIC</a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">COBOL</a>
</li>
<li class="ui-menu-item" role="menuitem">
<a class="ui-corner-all" tabindex="-1">Ruby</a>
</li>
</ul>
Put with pop up I miss these lines. I have no idea, what I have to change.
Any help?
My code:
Add page / two php snippet:
echo '
<script src="include/jquery.js"></script>
<script src="include/jquery.ui.core.js"></script>
<script src="include/jquery.ui.widget.js"></script>
<script src="include/jquery.ui.position.js"></script>
<script src="include/jquery.ui.autocomplete.js"></script>
<LINK rel=stylesheet type=text/css href="styles/jquery.ui.autocomplete.css">
<meta charset="utf-8">
<script>
$(function() {
var availableTags = [ //Just for testing propose
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" ).bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
$(".ui-autocomplete").position({
my: "left top",
at: "left bottom",
of: $("#tags"),
collision: "flip flip"
});
});
</script>
';
echo '<div class="demo">
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<input aria-haspopup="true" aria-autocomplete="list" role="textbox" autocomplete="off" class="ui-autocomplete-input" id="tags" size="50">
</div>
</div>';
|