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 ?

0

Dodałem alert w tym miejscu i nie wyskakuje mi ta wiadomość , czyli w ogóle nie wykonuje tego kodu;/

$(document).ready(function () {
    alert('aaaa');
    $(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 
            }
        });
    });
});

Jaka może być przyczyna ? kilka linijek wyżej mam kod(w tym samym pliku) i działa on poprawnie :

function SetKeyValue() {
    $("#Tb_key").val(document.getElementById('Key').value);
};

hmmm...?!

0

Taki kod u mnie działa i ładuje twój skrypt - podomykałem ci div'y, scripty itp. - działa pod względem ładuje twój skrypt

<html debug="true">
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css"/>
<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>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"></script>
<script src="Scripts/myHelper.js" type="text/javascript"></script>
</head>

<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>
</div>
</div>
</div>
</body>
<style type="text/css"/>
</html>
0

Nie mam pojęcia dlaczego ale zmieniłem tylko to , że dodałem do mojego widoku (index.cshtml):

<script src="@Url.Content("~/Scripts/myHelper.js")" type="text/javascript"></script>

i skrypt zaczął działać. Tak samo miałem dodany skrypt tylko , że w pliku layout i nie działało... jaka jest różnica ?

0

Taka, że poprzednio wskazywałeś na nieprawidłową ścieżkę do tego pliku, więc się pewno nie wczytywał w ogóle.
Trzeba czytać informacje z konsoli przeglądarki.

0

Nie działa:


<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" type="text/css" rel="Stylesheet" />
    <script src="/Scripts/myHelper.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
    <form action="/" method="post">    <p>
        Podaj klucz: <input data-val="true" data-val-length="Klucz nie może mieć więcej niż 128 znak&amp;#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"><option value="0">PL</option>
<option value="1">EN</option>
</select>
    </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>
        Sprawdź tłumaczenie dla wybranego klucza i języka:
        <input type="submit" value="Sprawdź" name="check" />
    </p>
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>    <input type="submit" value="Zapisz/Dodaj" />                                                         
</form>
</body>
</html>

Działa:


<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <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>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>

<body>
        <script src="/Scripts/myHelper.js" type="text/javascript"></script>
<form action="/" method="post">    <p>
        Podaj klucz: <input data-val="true" data-val-length="Klucz nie może mieć więcej niż 128 znak&amp;#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"><option value="0">PL</option>
<option value="1">EN</option>
</select>
    </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>
        Sprawdź tłumaczenie dla wybranego klucza i języka:
        <input type="submit" value="Sprawdź" name="check" />
    </p>
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>    <input type="submit" value="Zapisz/Dodaj" />                                                         
</form>
</body>
</html>

Jak widać różnica jest w tym , że script myHelper.js w drugim przypadku jest dodany w sekcji body i dzięki temu działa ...ale co zmienia miejsce w którym dodaje ten skrypt ,hm ?

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