asp.net mvc + jquery autocomplete (data from server)

0

Witam,
chce napisać autocomplete do textboxa, przeglądałem już sporo stron jak to zrobić, ale niestety się nie udało. Póki co mam coś takiego i to działa:

var regions = ['Eastern', 'Western', 'Northern', 'Southern'];
 
$(document).ready(function () {
  //Adding autocomplete to region input
  $("#region").autocomplete(regions, {
    //Minimum number of characters a user has to type before the autocompleter activates
    minChars: 0,
    //The number of items in the select box
    max: 4,
    //Fill the input while still selecting a value
    autoFill: true,
    //Only suggested values are valid
    mustMatch: true,
    //The comparison doesn't looks inside 
    matchContains: false
  });
});

Jednak tutaj dane są podane na sztywno przez javascript. Ja chcę pobrać te dane z bazy danych i nie bardzo wiem jak to zrobić... <help>

0

Najprościej będzie przekazać je z akcji kontrolera przez ViewBag i tablicę regions wypełnić przekazanymi wartościami.

0
somekind napisał(a):

Najprościej będzie przekazać je z akcji kontrolera przez ViewBag i tablicę regions wypełnić przekazanymi wartościami.

czytałem też, że można wykorzystać JSON , ale ciężko jest cokolwiek napisać gdy się czegoś nigdy wcześniej nie 'dotykało'.
Mógłbyś zapodać konkretnie ten kawałek kodu? z MVC niedawno zacząłem przygodę. Myślałem, że za pomocą ViewBag można przekazać parametry z kontrolera do widoku(ale jak uzupełnić tablicę regions?)

1

Controller ma możliwość zwrócenia JsonResul - wystarczy tam wcisnąć jakiś obiekt. Przykład http://carlhoerberg.com/how-to-use-jquery-ui-autocomplete-with-aspnet

0

@rahim99, przede wszystkim odpowiedz sobie na pytanie, czy chcesz mieć tę tablicę uzupełnioną raz, podczas wyświetlania strony, czy chcesz, aby uzupełniała się dynamicznie, w odpowiedzi na jakieś zdarzenie na stronie.

0
szopenfx napisał(a):

Controller ma możliwość zwrócenia JsonResul - wystarczy tam wcisnąć jakiś obiekt. Przykład http://carlhoerberg.com/how-to-use-jquery-ui-autocomplete-with-aspnet

Ten przykład działa , dzięki bardzo !

Wytłumaczy mi ktoś dlaczego jak wrzucam ten kawałek kodu do pliku myFile.js a nastepnie w _leyout.cshtml importuje go - skrypt działa niepoprawnie, natomiast jeżeli wrzucę ten kod bezpośrednio do mojego widoku to autocomplete działa poprawnie?

$(function () {
        $("#Key").autocomplete({
            source: '/Home/Users',
            minLength: 1,
            select: function (event, ui) {

                //alert
                // Do something with  "ui.item.Id" or "ui.item.Name" or any of the other properties you selected to return from the action 
            }
        });
    });
0

Pokaż wygenerowany kod HTML

0

coś takiego: (kod js jest w pliku myHelper.js)

<html debug="true">
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css"/>
<script src="/Scripts/myHelper.js" type="text/javascript"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" type="text/css" rel="Stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"/>
</head>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/>
<body>
<div style="position: absolute;">
<div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; z-index: 2147483647;" id="_GPL_e6a00_parent_div">
<form action="/" method="post">
<p>
Podaj klucz:
<input data-val="true" data-val-length="Klucz nie może mieć więcej niż 128 znak&#243;w." data-val-length-max="128" data-val-required="Należy podać klucz." id="Key" name="Key" onblur="SetKeyValue()" onclick="SetKeyValue()" onkeyup="SetKeyValue()" type="text" value=""/>
</p>
<p>
Wybrany klucz:
<input id="Tb_key" name="Tb_key" readonly="readonly" type="text" value=""/>
</p>
<p>
Język:
<select id="DropDownListElements" name="DropDownListElements">
</p>
<p>
Tłumaczenie:
<input id="Tb_value" name="Tb_value" type="text" value=""/>
</p>
<p>
Usuń:
<input data-val="true" data-val-required="The Obsolete field is required." id="Obsolete" name="Obsolete" type="checkbox" value="true"/>
<input name="Obsolete" type="hidden" value="false"/>
</p>
<p>
<div class="validation-summary-valid" data-valmsg-summary="true">
<input type="submit" value="Zapisz/Dodaj"/>
</form>
</body>
<style type="text/css"/>
</html>
0

Tag script powinien być zamknięty i nie traktowany jako self-closing, skrypty importowane są od góry do dołu, najlepiej jeśli kawałek jQuery wstawisz w zdarzenie ready tak jak opisane jest to tutaj: http://learn.jquery.com/about-jquery/how-jquery-works/

0

ok, tagi domknięte <script></script>
w pliku myHelper.js dałem coś takiego :

$(document).ready(function () {
    $(function () {
        $("#Key").autocomplete({
            source: '/AutoComplete/Users',
            minLength: 1,
            select: function (event, ui) {

                //alert
                // Do something with  "ui.item.Id" or "ui.item.Name" or any of the other properties you selected to return from the action 
            }
        });
    });   
});

i nadal nie działa ...jakieś pomysły ?

1 użytkowników online, w tym zalogowanych: 0, gości: 1