jQuery autocomplete combobox mit den standardmäßig ausgewählten Wert

Verwende ich jQuery-Autocomplete bei combobox. Ich bin versucht, wählen Sie default-Wert, wie PHP-option. Ich hoffe, Sie verstehen meine qyetion.

Irgendwelche Ideen oder Vorschläge? Danke.

Mein Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Combobox</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style>
.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
    margin: 0;
    padding: 0.3em;
}
</style>
<script>
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" )
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
//Close if already visible
if ( wasOpen ) {
return;
}
//Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();

if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_removeIfInvalid: function( event, ui ) {
//Selected an item, nothing to do
if ( ui.item ) {
return;
}
//Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});
//Found a match, nothing to do
if ( valid ) {
return;
}
//Remove invalid value
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
this.input.data( "ui-autocomplete" ).term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
</script>
</head>
<body>
<div class="ui-widget">
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
</body>
</html>

Benötigen Sie genauere Angaben über Ihre Frage.wenn möglich, erstellen Sie eine Geige für Ihr Szenario,wir werde haben Sie einen Blick auf es.
Derzeit Standardwert ist nichts in meine combobox und ich möchte gewählte Wert wird von PHP. Mein jsFiddle jsfiddle.net/mzQ7m
Sie müssen nur das Attribut Selected für die option, die u behalten wollen als Standard. hier ist die Geige, die für den gleichen jsfiddle.net/dreamweiver/mzQ7m/1
Danke für deine Resonanz, aber ich möchte zu übergeben, php variable innerhalb von jquery-code. Nicht wie ausgewählte Attribut. Jede Idee zu diesem?
Ist es das, was Sie wollten ,jsfiddle.net/dreamweiver/mzQ7m/3

InformationsquelleAutor Rajnikanth | 2013-07-02

diese kann getan werden, indem die Schleife durch alle Werte, bis wir finden den Zielwert ein, und setzen Sie dann das Attribut ausgewählt entsprechenden option-tag.

JS-CODE:

setDefault("Scala");
//function to set the selected value as default
function setDefault(defValue) {
  $('#combobox option').each(function () {
    if (($(this).attr('value')) === defValue) {
        $(this).attr('selected', 'selected');
    }
  });
}

LIVE-DEMO @ JS Fiddle

InformationsquelleAutor dreamweiver

2

Den code, den dreamweaver geschrieben kann weiter vereinfacht werden. Es gibt keine Notwendigkeit, um eine Schleife durch die Optionen, die Sie verwenden können option[value=""] - und string-Verkettung zu bauen, den Selektor.
```
setDefault("Scala");
//function to set the selected value as default
function setDefault(defValue) {
    $('#combobox option[value="' + defValue + '"]').attr('selected', 'selected');
}
```
jsfiddle demo

InformationsquelleAutor John R

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.